jQuery中删除节点方法remove()、detach()、empty()分析

　　jQuery中提供了三种删除节点的方法：remove()、detach()、empty()，本文详细分析这三种方法。

　　最容易区分的是empty()，该方法严格上属于“清空节点”，即删除其子节点，自身并不会删除。举个栗子：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>remove和detach对比</title>
 6     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 7     <script type="text/javascript">
 8     $(function(){
 9         $(".apple").click(function(){alert('我是苹果');});
10         var $apple = $(".apple");
11 
12         //empty()
13          $(".delete").click(function(){
14              $apple.empty();
15          });
16          $(".add").click(function(){
17              $apple.text("苹果");
18          });
19 
20 
21     });
22 
23     </script>
24 </head>
25 <body>
26     <div>
27         <ul>
28             <li>香蕉</li>
29             <li>草莓</li>
30             <li>橘子</li>
31             <li style="color:red;" class="apple">苹果</li>
32         </ul>
33         <button class="delete">点击删除</button>
34         <button class="add">点击添加</button>
35     </div>
36 </body>
37 </html>

　　删除前：

 

　　删除后：

 

　　empty()方法很容易理解。下面重点分析一下remove()和detach()方法：

　　remove()：删除所有后代节点及自身，与该节点绑定的事件删除后也将解除绑定。同样使用上面的栗子，js代码如下：

1         //remove--节点删除后，绑定的事件也会解除。
2         $(".delete").click(function(){
3             $apple.remove();
4         });
5         $(".add").click(function(){
6             $apple.appendTo("ul");
7         });

　　删除前，点击“苹果”，会跳出提示信息：

　　删除后：

　　

　　点击添加后，能够得到删除前一样的效果，但是点击“苹果”时不会出现提示框，说明原来绑定的click()事件解除了。

　　

　　detach()：删除所有后代节点及自身，但与该节点绑定的事件删除后依然保留。js代码：

1         //detach--节点删除后，绑定的事件依然存在，可继续使用。
2         $(".delete").click(function(){
3             $apple.detach();
4         });
5 
6         $(".add").click(function(){
7             $apple.appendTo("ul");
8         });

　　删除后再次添加节点，点击“苹果”会保留删除前的绑定信息，即弹出提示信息。

 

　　全文完，欢迎各位朋友批评指正！

 

posted @ 2016-03-19 14:38  Acelit  阅读(1990)  评论(0)  编辑  收藏  举报