How do I remove a <tr> with jQuery?

Question

Okay, I am really stuck here.

I have a table of tr's that have id's: #tr_xx where xx is a number.

item is a number.

The if(... part makes sure that what follows is only executed once at the end of all the animations.

$('#tr_' + item + '>td').fadeOut('slow', function() {                
    if($('#tr_' + item + '>td:animated').length === 0)
    {
        $(this).parent().remove();
        // This function recolors the rows
        // -not really related to this
        Recolor();
        }
    });

The problem is that the tr does not get deleted. It just gets hidden.

How can I delete the <tr> and not just hide it?

Answer 1

this should do the trick:

$('#tr_'+item).fadeOut('slow', function(){
    $(this).remove();
}

---

EDIT: For IE, try

$('#tr_'+item).css('display', 'block').fadeOut('slow', function(){
    $(this).remove();
}

I don't know if this will work or not, coz I don't have IE to test it out. Thing is, default display of <tr> is 'table-row', which might the problem in IE.

And of course, the other thing you could do is put up a big banner or the page saying IE should Die.