jQuery删除节点的3种方法（附带实例）

jQuery 提供了 3 种删除节点的方法，分别是 remove()、detach() 和 empty() 方法。

jQuery remove()方法

remove() 方法用于从 DOM 中删除所有匹配的元素，传入的参数用于根据 jQuery 表达式来匹配元素。

当使用 remove() 方法删除某个节点之后，该节点所包含的所有子节点将同时被删除。remove() 方法的返回值是一个指向已被删除节点的引用，以后也可以继续使用这些元素。

例如下面的代码：

var $p_2 = $("div p:eq(1)").remove(); // 获取第 2 个<p>节点后，将它从页面中删除
$("div").append($p_2); // 把删除的节点重新添加到<div>中

【实例 1】使用remove()方法删除节点。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中添加一个 <div> 元素，在 <div> 元素下创建两个 <p> 节点，并且为 <p> 节点赋予属性 title。具体代码如下：

<div>
    <p title="C语言基础教程">C语言基础教程</p>
    <p title="C语言中文网">C语言中文网</p>
</div>

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，删除 <div> 元素下的第 2 个 <p> 节点。具体代码如下：

$(document).ready(function(){
    $("div p").remove("p[title != 'C语言基础教程']");
    // 删除<p>元素中 title 属性值不等于“C语言基础教程”的元素
});

运行本实例，将显示下图所示的效果：

图 1 删除节点

jQuery detach()方法

detach() 方法和 remove() 方法一样，也用于删除 DOM 中匹配的元素。

需要注意的是，detach() 方法不会把匹配的元素从 jQuery 对象中删除，因此在将来仍然可以使用这些匹配的元素。与 remove() 不同的是，detach() 会保留所有绑定的事件或附加的数据。

例如下面的实例：

$("div p").click(function(){
    alert($(this).text());
});
var $p_2 = $("div p:eq(1)").detach(); // 删除元素
$p_2.appendTo("div");

由此可以看出，使用 detach() 方法删除元素之后，再执行 $p_2.appendTo("div")，重新追加此元素，之前绑定的事件还在。而如果使用 remove() 方法删除元素，再重新追加此元素，之前绑定的事件将失效。

【实例 2】使用 detach() 方法将实例 1 中页面 <div> 元素下的第 2 个 <p> 元素删除。具体代码如下：

var $p_2 = $("div p:eq(1)").detach(); // 删除元素

之后再使用 appendTo() 方法将已删除的 <p> 节点添加到 <div> 元素中。具体代码如下：

$p_2.appendTo("div");

运行本实例可以看到，该元素又显示在页面中，页面运行效果如下图所示：

图 2 使用detach()方法删除节点

jQuery empty()方法

严格地说，empty() 方法并不会删除元素节点，而是将节点清空，该方法可以清空元素中所有的子节点。具体 jQuery 代码如下：

$("div p:eq(1)").empty(); // 获取第 2 个<p>元素后，清空该元素中的内容

运行此代码后，第 2 个 <p> 元素中的内容被清空，但第 2 个 <p> 元素，即 <p title="C语言中文网"></p> 还在。

jQuery删除节点的3种方法（附带实例）

jQuery remove()方法

jQuery detach()方法

jQuery empty()方法

相关文章