如何使用jQuery删除表中的行？ [英] How to delete a row in a table using jQuery?

问题描述

我有一个如下的Bootstrap表，

I have a Bootstrap table as follows,

<table class="table table-striped table-bordered">
    <tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Delete</th></tr>
    <tr><td>Mickey</td><td>Mouse</td><td>5</td><td><button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash"></span></button></td>
    <tr><td>Tom</td><td>Cat</td><td>6</td><td><button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash"></span></button></td>
    <tr><td>Pooh</td><td>Bear</td><td>4</td><td><button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash"></span></button></td>
    <tr><td>Donaled</td><td>Duck</td><td>7</td><td><button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash"></span></button></td>
    <tr><td>Jerry</td><td>Mouse</td><td>8</td><td><button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash"></span></button></td>
</table

每当用户点击垃圾按钮时，该特定行应该被删除。如何使用jQuery实现这一目标？

Whenever a user clicks on the trash button, that specific row should get deleted. How can I accomplish that using jQuery?

这是我到目前为止的链接 - http://jsbin.com/gabodamace/edit?html,output

Here's a link to what I've got so far - http://jsbin.com/gabodamace/edit?html,output

提前致谢！

推荐答案

$('table').on('click','.delete',function(){
  $(this).parents('tr').remove();
});

在你的代码中添加 class =btn btn-default btn-sm delete 。添加类 delete 也可以帮助您在其他处理程序中使用 btn 类。 .remove（）函数删除该选择器的整个html。

In your code add class="btn btn-default btn-sm delete. Adding a class delete will help you to use btn classes in other handlers also. .remove() function removes the whole html for that selector.

请参阅jsFiddle： https://jsfiddle.net/jagrati16/o7bu09jr/1/

Refer to jsFiddle: https://jsfiddle.net/jagrati16/o7bu09jr/1/

这篇关于如何使用jQuery删除表中的行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！