jQuery中的remove()detach()和empty()的区别

Posted 2020-08-08

jQuery提供三种删除节点的方法。

 

1. remove()方法

从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。

返回值是一个指向已被删除的节点的引用。

意思就是说，删除后还可以继续使用：

var $li  = $("ul li :eq(1)").remove();
$li.appendTo("ul");

可以使用appendTo()方法，省略remove();

$("ul li:eq(1)").appendTo("ul");

也可以传递参数来选择性地删除元素。

$("ul li").remove("li[]title!=菠萝");

 

2. datach()方法

也是从DOM中删除所有匹配元素，但不会把匹配的元素从jQuery对象中删除。

与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

$("ul li").click(function(){
    alert($(this).html());
}):

var $li = $("ul li:eq(1)").detach();
$li.appendTo("ul");//重新追加此元素，发现之前绑定的事件还在，如果使用remove()方法删除元素的话，那么它之前绑定的事件将失效。

 

 

3. empty()方法

严格来讲，empty方法并不是删除节点，而是清空节点。

$("ul li:eq(1)").empty();