如何使用jQuery删除表中的一行？答案

【问题标题】：How to delete a row in a table using jQuery?如何使用jQuery删除表中的一行？
【发布时间】：2016-07-30 14:50:45
【问题描述】：

我有一个如下的 Bootstrap 表，

<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 来实现呢？

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

提前致谢！

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

像下面这样：

$('.btn-default').click(function(){
  $(this).parents('tr').remove();
})

试用演示： JsFiddle

【讨论】：

【解决方案2】：

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

在您的代码中添加class="btn btn-default btn-sm delete。添加 delete 类将帮助您在其他处理程序中使用 btn 类。 .remove() 函数会删除该选择器的整个 html。

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

【讨论】：