jQuery basic：如何在单击此行的按钮时删除表行？

$("#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.

提前致谢。

3 个解决方案

#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.

使用.live绑定事件会在动态添加行时自动绑定它。

Edit

live is now deprecated, since version 1.7 I think.

live我现在已弃用,因为我认为1.7版本。

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

现在的方法是使用而不是直播。

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

See the doc.

见文档。

#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.

有关更多信息,请参阅此文章。

#3

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

#1

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