JQuery操作文档之删除节点

JQuery提供了两种方法来删除节点:remove()和empty()

1.remove()

作用是从DOM中删除所有匹配的元素,传入的参数用来根据JQuery表达式来筛选元素。

值得一提的是:当使用remove()删除某个节点后,该节点所包含的的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。如:

var $li = $(“ul li:eq(0)”).remove();//获取第一个li元素节点后将它从页面删除

$li.appendTo(“ul”);//将刚才删掉的节点重新添加到ul中, 并作为最后一个元素

 

也可以直接使用appendTo()方法的特性来简化上面的代码,appendTo()方法除了有追加的功能外还有移动元素的功能,移动元素时需要先删掉元素在将元素插入到指定节点,因此以上代码可以简化为:

$(“ul li:eq(0)”).appendTo(“ul”);

 

2.empty()

严格来说,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点。

如:

$(“ul li:eq(0)”).empty();

运行此代码会发现,第一个li的内容被清空了只剩下li标签默认的符号”·”,也就是清空了li的text()值,li元素并没有被移除。

相关推荐