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 阅读(345) 评论(0) 编辑 收藏 举报
