jQuery basic：当点击此行的按钮时，如何删除表格行？

Question

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

这会动态创建表格行。 每个新创建的行都有一个“删除”按钮。

现在，如果我点击删除按钮，该行将被删除。 我该如何做到这一点。

在此先感谢。

Answer 1

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

使用.live绑定你的事件将自动绑定它时动态添加的行。

编辑

live现在已经过时，因为1.7版本，我认为。

现在要走的路是使用on而不是live。

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

查看doc。

Answer 2

您可以使用此代码删除包含点击按钮父行：

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

对于一个活生生的例子看this link。

欲了解更多信息，请参阅this article。

Answer 3

你可以这样做：

$('.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())});