在前端开发中，我们经常会遇到需要对表格中的数据进行操作的需求。例如，我们可能需要删除某个行或者多个行。在 jQuery 中，我们可以使用 remove() 方法来删除 DOM 元素，然后通过选择器来选择我们需要删除的元素。下面，我们就来看看具体的实现方法。
在 HTML 中，我们可以添加一个按钮，当用户点击该按钮时，我们可以执行删除操作。首先，在表格中每一行的最后一列中添加一个删除按钮，并为该按钮添加一个自定义的 data-index 属性，用于标识该按钮所在的行的索引值。
<table id="table"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>张三</td> <td>22</td> <td><button class="btn-delete" data-index="0">删除</button></td> </tr> <tr> <td>002</td> <td>李四</td> <td>25</td> <td><button class="btn-delete" data-index="1">删除</button></td> </tr> <tr> <td>003</td> <td>王五</td> <td>30</td> <td><button class="btn-delete" data-index="2">删除</button></td> </tr> </tbody> </table>
然后，我们可以为这些按钮添加一个事件监听器，当按钮被点击时，我们就可以根据该按钮所在行的索引值来删除对应的行：
$(document).on('click', '.btn-delete', function() {
var index = $(this).attr('data-index'); // 获取该按钮所在行的索引值
$('#table tr').eq(index + 1).remove(); // 删除指定索引的行，注意加一是因为表头占据了第一行
});除了按钮触发事件外，另一个常见的方式就是勾选复选框触发事件。在这种情况下，我们可以在每个行前添加一个复选框，当用户勾选某些复选框后，就可以执行删除操作。
首先，我们需要给每个行前都添加一个复选框，并使用 data-index 属性来标识该复选框所在行的索引值：
<tr> <td><input type="checkbox" class="check-item" data-index="0"></td> <td>001</td> <td>张三</td> <td>22</td> <td><button class="btn-delete">删除</button></td> </tr> <tr> <td><input type="checkbox" class="check-item" data-index="1"></td> <td>002</td> <td>李四</td> <td>25</td> <td><button class="btn-delete">删除</button></td> </tr> <tr> <td><input type="checkbox" class="check-item" data-index="2"></td> <td>003</td> <td>王五</td> <td>30</td> <td><button class="btn-delete">删除</button></td> </tr>
接下来，我们为表格添加一个 "全选" 的复选框。当该复选框被勾选时，所有行前的复选框都将被勾选。反之，如果取消 "全选" 复选框的勾选，则所有行前的复选框也将被取消勾选。
<input type="checkbox" id="check-all">全选
$('#check-all').click(function() {
var isChecked = $(this).prop('checked'); // 获取全选复选框的状态
$('.check-item').prop('checked', isChecked); // 将所有行前的复选框的状态设置为与全选复选框相同
});最后，我们为删除按钮添加一个点击事件监听器。在该事件处理函数中，我们首先获取所有勾选了的复选框所在行的索引值，然后使用 remove() 方法将这些行删除。
$(document).on('click', '.btn-delete', function() {
var $checkedItems = $('.check-item:checked'); // 获取所有勾选了的复选框
var indexes = [];
$checkedItems.each(function() {
indexes.push($(this).attr('data-index')); // 将每个勾选了的行所在索引值添加到数组中
});
$('#table tr').eq(indexes).remove(); // 删除所有勾选了的行
});综上所述，通过以上两种方式，我们可以很方便地实现删除表格中指定的行。
以上是jquery怎么移除选择的行的详细内容。更多信息请关注PHP中文网其他相关文章！
