What is the best way to remove a table row with jQuery?
$('#myTable tr').click(function(){
$(this).remove();
return false;
});
Even a better one
$("#MyTable").on("click", "#DeleteButton", function() {
$(this).closest("tr").remove();
});
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.
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.