Problem with animating the deletion of table rows in jQuery

Posted by Victor on Stack Overflow See other posts from Stack Overflow or by Victor
Published on 2009-08-20T00:26:37Z Indexed on 2010/06/09 4:32 UTC
Read the original article Hit count: 505

Filed under:
|
|
|
|

Hey guys, 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?

Thanks in advance for your insights! Victor

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about animation