tablesorter after removed a row, sorting left a gap

Question

Here is a what I'm using this to slide up a row in a table. I also created a codepen.

$(".tablesorter").tablesorter();

$('.remove').on('click', function(){
  $(this).closest('tr').children('td').animate({ padding: 0 }).wrapInner('<div/>').children().slideUp(function () {
    $(this).closest('tr').remove();
  });
  $(".tablesorter").trigger('update');
});

Goal:

• Slide up the row when clicking Remove
• Sort properly without gaps

Now the slide up works. But after sliding up the sorting leaves a gap between the rows - the removed row shows up as a gap (Not very obvious in codepen). So how to remove the row completely? or why did it show up again after sorting?

Actually, if I remove the row directly without sliding up, the sorting works perfectly, but the customers like the slide up...

Answer 1

Since the .animate() method is asynchronous, execution continues immediately after you call .animate() and you are effectively calling the update on the tablesorter before the actual row is removed from the table.

Use the callback function on the animate method and update the tablesorter there.

Example:

$('.remove').on('click', function(){
   $(this).closest('tr').children('td').animate({ padding: 0 }).wrapInner('<div />').children().slideUp(function () {
        $(this).closest('tr').remove();
        $(".tablesorter").trigger('update');
    });
});