Angry-apple

导航

jQuery中删除方法empty(),remove()和detach()的区别

empty():清空匹配的元素集合中所有的子节点，自身节点和事件都未被删除。

remove():这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

detach()：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

举个栗子：

1 <body>
2     <div id="div1" style="height: 100px;width: 300px;border: 1px solid black;background: yellow;">
3             this is some text in the div.
4         <p id="panel">pppp</p>
5         <p>two ppppppp</p>
6     </div>
7     <button>删除div元素</button>
8 </body>

empty():清空节点，保留自身。

$('button').click(function () {
    $('#div1').empty();            
})

效果：

remove():删除被选元素极其子元素。

$('button').click(function () {
    $('#div1').remove();            
})

效果：

detach()方法同detach,但是可以保留jquery相关的数据和绑定事件。

1 $('#panel').hover(function () {
2     $(this).css('color','red');
3 })
4     var deleteP = $('#panel').detach();
5     $('#div1').append(deleteP);

效果：

 

如果用remove()不会保留数据和绑定事件。

$('#panel').hover(function () {
    $(this).css('color','red');
})
    var deleteP = $('#panel').remove();
    $('#div1').append(deleteP);

效果：p不会改变颜色，hover不起作用

 

 

 关于追加之后p跑到下边问题：

首先，你通过$("p").detach()把上面的p给“删除/隐藏”了，实际上p还是存在的，只是你看不到了。
然后你又用
$("body").append($("p").detach());
向body中添加元素，这个元素其实还是p。

不是p跑到下面，而是你把p给“复制”了一个并添加到最下面，原来的p给隐藏了。

 

 

提示：如需移除元素，但保留数据和事件，请使用 detach() 方法。

提示：如需移除元素及它的数据和事件，请使用 remove() 方法。

提示：如只需从被选元素移除内容，请使用 empty() 方法。

 

posted on 2018-01-12 09:56  Angry-apple  阅读(329)  评论(0)  编辑  收藏  举报