jQuery remove()过滤被删除的元素（推荐）

简介

jQuery remove() 方法用于删除 HTML 元素。该方法也可以移除事件处理程序和数据。

remove() 方法会保留被删除的元素的数据和事件处理程序，因此这些被删除的元素可以在需要时再次插入到 DOM 中。

同时，remove() 方法还提供了过滤被删除的元素的功能，这样可以更方便的操作被删除的元素。

语法

$(selector).remove(filter)

参数说明：

• selector：必须，用于筛选需要删除的元素的选择器表达式；
• filter：可选，用于过滤被删除的元素的选择器表达式。

过滤被删除的元素

remove() 方法可以接受一个选择器表达式作为参数，用于筛选需要删除的元素。

同时，remove() 方法还可以接受一个过滤器（filter）作为参数，用于过滤被删除的元素。

例如，我们可以使用以下代码来删除类名为 red 的元素，并过滤出被删除的元素：

<div class="red">要删除的红色元素</div>
<div>不是要删除的元素</div>
<div class="red">要删除的红色元素</div>
<div>不是要删除的元素</div>

<script>
// 删除类名为 red 的元素，过滤出被删除的元素
var removedElement = $('div.red').remove('.red');
console.log(removedElement);
</script>

执行以上代码，可得到以下结果：

[<div class="red">要删除的红色元素</div>, <div class="red">要删除的红色元素</div>]

可以看出，返回了被删除的两个类名为 red 的元素。

示例：删除表格行并过滤被删除的行

我们可以使用 remove() 方法来删除表格中的某一行，并过滤出被删除的行。

以下是示例代码：

<table id="myTable">
  <tr><td>第一行</td></tr>
  <tr><td>第二行</td></tr>
  <tr><td>第三行</td></tr>
</table>

<script>
// 点击按钮删除第二行，并过滤出被删除的行
$('button').click(function() {
  var removedRow = $('#myTable tr:eq(1)').remove();
  console.log(removedRow);
});
</script>

上述代码中，我们绑定了一个点击事件，当点击按钮时，删除表格中的第二行，并过滤出被删除的行。

执行以上代码，并点击按钮后，可得到以下结果：

[<tr><td>第二行</td></tr>]

可以看出，返回了被删除的第二行元素。

总结

remove() 方法提供了过滤被删除的元素的功能，可以更方便的操作被删除的元素。我们可以通过筛选还是过滤的方式来指定需要删除的元素。

需要注意的是，remove() 方法会保留被删除的元素的数据和事件处理程序，因此这些被删除的元素可以在需要时再次插入到 DOM 中。