What is the best way to remove a table row with jQuery?

What is the best way to remove a table row with jQuery?

What is the best method for removing a table row with jQuery?

Solutions/Answers:

Solution 1:

You’re right:

$('#myTableRow').remove();

This works fine if your row has an id, such as:

<tr id="myTableRow"><td>blah</td></tr>

If you don’t have an id, you can use any of jQuery’s plethora of selectors.

Solution 2:

$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});

Solution 3:

Assuming you have a button/link inside of a data cell in your table, something like this would do the trick…

$(".delete").live('click', function(event) {
    $(this).parent().parent().remove();
});

This will remove the parent of the parent of the button/link that is clicked. You need to use parent() because it is a jQuery object, not a normal DOM object, and you need to use parent() twice, because the button lives inside a data cell, which lives inside a row….which is what you want to remove. $(this) is the button clicked, so simply having something like this will remove only the button:

$(this).remove();

While this will remove the data cell:

    $(this).parent().remove();

If you want to simply click anywhere on the row to remove it something like this would work. You could easily modify this to prompt the user or work only on a double-click:

$(".delete").live('click', function(event) {
    $(this).parent().remove();
});

Hope that helps…I struggled on this a bit myself.

Solution 4:

You can use:

$($(this).closest("tr"))

for finding the parent table row of an element.

It is more elegant than parent().parent() which is what I started out doing and soon learnt the error of my ways.

–Edit —
Someone pointed out that the question was about removing the row…

$($(this).closest("tr")).remove()

As pointed out below you can simply do:

$(this).closest('tr').remove();

A similar code snippet can be used for many operations such as firing events on multiple elements.

Solution 5:

Easy.. Try this

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});

Solution 6:

Is the following acceptable:

$('#myTableRow').remove();