html如何删除表单中的行,用jQuery remove()方法删除表格行(table tr)的写法

用jQuery remove()方法删除表格行(table tr)的写法

 1

 1186

郁匆

2019/6/12 10:00:06

如何用jQuery按钮单击事件，按id或class-name删除表行。 在按钮单击时，我们删除选定的行/ tr可能是其动态添加的表行或已在DOM上使用的。 使用jQuery .on()将能够通过指定其类名或Id来选择动态添加的元素，然后使用.remove()方法删除所选的表行。

输出

img[/layedit/img/201906120958097750.gif]

首先，我们在HTML页面中添加了一个表标记，其中包含一些“tr”表行和“td”表数据以及一个名为Delete的按钮。 这里删除按钮用于删除特定的表行。我们的HTML结构如下面的代码[pre]

Sr	Name	Location
1	Amit	Ghatkopar	Delete
2	Vicky	Powai	Delete
3	Sunny	Powai	Delete
4	John	NewYork	Delete

[/pre]

在上表中，我们添加了一些数据，在每一行中，我们有一个公共类为“btnDelete”的按钮。 现在将在按钮单击时添加单击事件，单击它将从HTML表中删除该行tr。

首先我们在按钮标签上创建一个jQuery单击事件，然后使用nearest()方法选择tr，之后用remove()方法删除该tr，类似于使用.next()方法和.remove()删除下一个表行tr。 这是我们能够删除表格行的方式。

[pre]

$("#tbUser").on('click', '.btnDelete', function () {

$(this).closest('tr').remove();

});

[/pre]