Animating the deletion of table rows in jQuery

Question

I have written some jQuery code to use the "slideUp" animation when deleting rows from a table. In order for the animation to appear smooth, I wrapped the contents of each TD in the row with DIV tags, and called the slideUp function on the DIVs, removing the actual TDs upon completion of the animation. The code for that is as follows:

$("tr[id$=" + rowID + "]").children("td").each(function() {
    $(this).children("div").slideUp(function() {
        $(this).parent().remove();
    });        
});

So far, so good. However, I noticed that this code does not remove the actual TR, only its contents, so I added the following line to remove the TR:

$("tr[id$=" + rowID + "]").remove();

The problem is that after I added the line above, the animation quit working. In other words, the row simply disappears without the nice sliding effect. Does anybody know why this is so and how to get around it?

Answer 1

Because you're removing the tr that contains all of the animated elements. No more elements, no more animation. Given that all of the slideUps should be taking the same amount of time, you can probably get away with changing the finish callback from $(this).parent().remove() to $(this).closest('tr').remove().

Answer 2

I wrote a jQuery plugin that lets you do this. You can add and remove rows and it doesn't require wrapping your data with a div or anything like that. Check it out at http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

Best,

Fletch