JSFiddle - React, Tailwind, and code Playground

HTML

<div class="divs"><button class="excluir">X</button></div>
<div class="divs"><button class="excluir">X</button></div>
<div class="divs"><button class="excluir">X</button></div>
<div class="divs"><button class="excluir">X</button></div>
<div class="divs"><button class="excluir">X</button></div>

CSS

body{
   margin: 0; padding: 0;
}
.divs{
   position: relative;
   width: 90%;
   height: 50px;
   background-color: red;
   margin: 20px auto;
   animation-delay: 2s;
}

@keyframes anim{
   0%{
       left: 0;
   }
   100%{
       left: -100%;
   }
}

JavaScript

$(document).ready(function(){
   
   var animacao;

   $(".divs .excluir").on("click", function(){

      if(!animacao){
         animacao = true;
         var iten = $(this).closest(".divs");
         var conta = $(".divs").length;
         iten.css("animation", "anim 2s forwards");

         iten.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
         function(){
            animacao = false;
            
            if(conta > 1 && iten.index() != conta-1){
            
               var d1 = iten.offset().top;
               var d2 = iten.next().offset().top;
               var itens = $(".divs").slice(iten.index()+1);
      
               itens.animate({
                  top: -(d2-d1)} , 500, function(){
                     iten.remove();
                     $(this).css("top", "0");
               });
   
            }else{

               iten.remove();

            }
            
         });
      }
   });
});