Jquery empty() remove() detach() 方法的区别_H5之家 - 中国HTML5教程资源分享第一站

> web前端 > JavaScript > 正文 Jquery empty() remove() detach() 方法的区别 2012-09-19 作者：walkerJong 我要投稿

引言：
最近项目中用到了这几个方法，感觉很大程度上有些相似，查了Jquery的api，同时也找了很多博客文章，发现还是理解不到区别。最后在很多材料和自己的事例验证中，终于找到了区别，不敢独占特拿出来分享。

方法简介：

empty()
This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element.
该方法不仅删除它的子节点，同时也删除该节点的文本域（根据DOM规范，节点的文本域也被认为是子节点）。

remove( [selector] )
selectorA selector expression that filters the set of matched elements to be removed.

Similar to .empty(), the .remove() method takes elements out of the DOM. Use.remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use.detach() instead.
和empty方法类似，remove方法也是从DOM里删除元素。当你想要删除节点本身和节点里的所有东西的时候，可以使用remove方法。除了节点本身以外，节点绑定的事件和该节点相关的JQuery数据，也会被同时清除。当需要清除节点本身，但是不需要清除绑定的事件和数据的时候，可以使用detach方法。

detach( [selector] )
selectorA selector expression that filters the set of matched elements to be removed.

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
detach方法和remove方法很相似，但是它会保留所有JQuery相关的数据和绑定的事件。当你删除之后，想要在后来的某个时候重新加入时，这个方法将会很有用。

三者区别：
empty,remove,detach方法的区别

方法名称

元素本身（包含所有属性）

绑定事件和JQuery相关数据

文本域及子节点

empty()
不删除

不删除

删除

remove()
删除

删除

detach()
删除

不删除

删除

示例验证：
验证环境： JQuery-1.8.0.min.js, Firefox 11.0， Firebug1.9.2；

1、验证是否删除元素本书（包含所有属性）、文本域及子节点
代码如下：

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Jquery remove detach empty</title>
<style>p { background:yellow; margin:6px 0; } p.off { background: black; }</style>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("p").click(function(){
            $(this).toggleClass("off");
        });

        var p;
        $("#button").click(function(){
              if ( p ) {
                p.appendTo("body");
                p = null;
              } else {
                p = $("p").detach();
            // p = $("p").remove();
            // p = $("p").empty();
              }
        });
    });
</script>
</head>

<body>
<p id="A">Hello <span>subNode</span></p>
how are
<p id="B">you? <span>subNode</span></p>

<input type="button" id="button" value="Attach/detach paragraphs" />

</body>
</html>
detach() 方法：
执行之前的HTML DOM结构如图：

执行删除之后的 HTML DOM结构如图：

观察可知使用detach方法，删掉了元素<p>本身即它的所有属性（id 等），文本域及其子节点<span>subNode</span>.

其他方法，类似可以验证，这里就不赘述。

2、验证绑定的事件和JQuery相关数据
这里需要说明的是：绑定事件，指的是JQuery动态绑定的事件，不是通过元素的属性指定的事件。（下面会举例说明）

JQuery 相关数据，不太懂指的什么，没有找到相关示例，希望有识之士不吝赐教。

下面的示例仅针对绑定事件，便于大家理解：