Masquer la boîte de dialogue après avoir masqué le bloc

Question

J'ai un script pour supprimer des données avec ajax. Après avoir cliqué sur le lien de suppression, une boîte de confirmation apparaît.

Lorsque je confirme, la boîte est masquée et après cela, la div contenant les données supprimées se cache également. Je voudrais que le div qui contient les données supprimées soit caché d'abord puis cache la boîte.

// this div will be hidden 
<div id="remove-item{{entity.id}}" > 

    <a class="fa fa-trash-o fa-fw fa-2x remove_item" href data-entity-id="{{ entity.id }}"> 
       </a> 

</div> 
<script> 
    $(document).ready(function() { 
     $(".remove_item").click(function() { 
      var entityId = $(this).attr('data-entity-id'); // 
      var removeItem = '#remove-item-' + entityId; // the div 
      bootbox.dialog({ 
       title: '<i class="fa fa-exclamation-triangle" style="color: brown"></i> Confirm', 
       message: 'Delete ?', 
       className: 'my-class', 
       buttons: { 
        cancel:{ 
         className: 'btn btn-default', 
         label: 'Close' 
        }, 
        success: { 
         className: 'fa fa-trash-o btn btn-danger', 
         label: ' Delete', 
         callback: function(){ 

         $.ajax({ 
          type: 'POST', 
          dataType: 'json', 
          url: Routing.generate('travel_delete_ajax', {'id': entityId }), 
          success: function() { 
           $(removeItem).hide(); // hide the div 
          } 
        }); 
         } 
        } 
       } 
      }); 
      return false; 
     }); 
    }); 
</script> 

Answer 1

Masquer la div avant d'ouvrir la boîte de dialogue:

$(".remove_item").click(function() { 
     var entityId = $(this).attr('data-entity-id'); 
     var removeItem = '#remove-item-' + entityId; 

     $(removeItem).hide(); // <-- here 

     bootbox.dialog({ 

     // <snip...> 

     }); 
    });