jQuery basic: How can i remove a table row when a button of this row is clicked?

Question

$("#tableid tbody:last").append(html);

This creates table rows dynamically. Each newly created row has a "remove" button.

Now if i click that remove button that row will be deleted. How can i do this.

Thanks in advance.

Answer 1

 $(buttonSelector).live ('click', function ()
 {
    $(this).closest ('tr').remove ();
 }
 );

using .live to bind your event will bind it automatically when your row is dynamically added.

Edit

live is now deprecated, since version 1.7 I think.

The way to go now is using on instead of live.

$('#tableid').on('click', buttonSelector, function(){
    $(this).closest ('tr').remove ();
});

See the doc.

Answer 2

You can use this code to delete the parent row containing the clicked button:

$(myButtonSelector).click(function(){
    $(this).parents('tr').first().remove();
});

For a live example see this link.

For more information see this article.