了解jQuery的detach()和remove()

jQuery中提供了两种移出一个DOM元素的方法detach()和remove(),虽然是一样的功能，但是给出两种方法，必然有它的不同之处。

empty() 单独说一下，它删除当前元素的所有子元素，包括文本节点，并不会删除当前元素的事件和样式，删除之后不可恢复。

官方解释：

　　　　detach() 方法移除被选元素，包括所有文本和子节点。detach() 会保留所有绑定的事件、附加的数据

　　　　remove() 方法是移出元素，包括绑定的事件，附加数据

代码分析

　　当使用的是 detach方法时，重新添加元素之后点击事件依然有效

　　当使用的是remove方法时，重新添加元素之后点击事件不生效

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script src="js/jquery-1.7.2.min.js"></script>
 7     <script>
 8         $(document).ready(function(){
 9             var $div1 = $('.div1')
10             // 绑定事件
11             $('.div1').click(function(){
12                 alert(1)
13             })
14             // 删除元素
15             $('#detach').click(function(){
16                 $div1.detach();
17             })
18             //重新添加
19             $('#back').click(function(){
20                 $('#box').append($div1)
21             })
22         })
23     </script>
24 </head>
25 <body>
26     <div id="box">
27         <div class="div1">aaaaaa</div>
28         <div class="div2"">bbbbbb</div>
29     </div>
30     <input type="button" value="detach" id="detach">
31     <input type="button" value="back" id="back">
32 </body>
33 </html>

了解jQuery的detach()和remove()

相关推荐