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 clic

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 could do something like:

$('.add').click(function(){
$("#tableid tbody:last").append('<tr><td>Hi</td><td><a class="remove">Remove</a>');
});

$('.remove').live('click',function(){console.log($(this).parent().parent().remove())});

Answer 3

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.