jQuery DOM删除节点操作指南

以下示例可能使用以下HTML代码：

复制代码如下：ul li title='t1 '苹果/li li香蕉/li li橙子/li li葡萄/li li草莓/li/ul。

1.remove()方法：

功能：从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式过滤元素。

例如，删除上图中ul节点中的第二个li元素节点。jQuery代码如下：

副本代码如下： $(文档)。ready(function(){ $(' ul Li : eq(1)')。移除()；});

当通过remove()方法删除节点时，该节点中包含的所有后代节点将同时被删除。此方法的返回值是对已删除节点的引用，因此这些元素可以在以后使用。下面的jQuery代码显示了一个元素在被remove()方法移除后仍然可以使用。

复制代码如下：var $ Li=$ ('ul li:eq (1)')。移除()；$ Li . appendo(' ul ')；//再次将删除的节点添加到ul元素中。

您可以直接使用appendTo()方法的特性来简化上面的代码：

复制代码如下： $ ('ul li:eq (1)')。追加到(' ul ')；//appendTo()方法也可以用来移动元素。移动元素时，首先从文档中删除元素，然后将元素插入文档中的指定节点。

此外，remove()方法还可以通过传递参数来选择性地移除元素：

副本代码如下： $ ('ul Li ')。移除(' Li[title=' t1 ']')；

2.分离()方法：

像remove()一样，Detach()从DOM中移除所有匹配的元素。但是需要注意的是，这个方法不会从jQuery对象中删除匹配的元素，所以这些匹配的元素可以在以后再次使用。与remove()不同，所有绑定的事件、附件数据等。会被保存下来。

下面的示例显示了它和remove()方法之间的区别：

按照以下方式复制代码： $(“ul Li”)。点击(函数(){alert ($ (this))。html())；})var $li=$('ul li:eq(1)')。分离()；//删除元素$ Li . appendo(' ul ')；//重新追加这个元素，发现之前绑定的事件仍然存在。如果使用remove()方法删除元素，则在它之前绑定的事件将无效；

3.empty()方法。

严格来说，empty()方法不是删除节点，而是清除节点，可以清除一个元素中的所有后代节点。

复制代码如下：$('ul li:eq(1)')。empty()；//获取第二个li元素节点后，清除该元素中的内容，注意它在元素中。

运行后的结果是：

运行代码后，第二个li元素的内容被清空，只留下默认符号“.”元素的元素。

以上就是本文描述的全部内容。希望大家都能喜欢。