1.DOM节点的删除
(1)empty()的基本用法
如果我们通过empty方法移除里面div的所有元素,它只是清空内部的html代码,但是标记仍然留在DOM中。
<div class="hello"><p>慕课网</p></div> //通过empty处理 $('.hello').empty() //结果:<p>慕课网</p>被移除 <div class="hello"></div>
(2)remove()的有参用法和无参用法
remove与empty一样,都是移除元素的方法,但是remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。
<div class="hello"><p>慕课网</p></div> $('.hello').on("click",fn)
//通过remove处理 $('.hello').remove() //结果:<div class="hello"><p>慕课网</p></div> 全部被移除 //节点不存在了,同事事件也会被销毁
(3)保留数据的删除操作detach()
如果我们希望临时删除页面上的节点,但是又不希望节点上的数据与事件丢失,并且能在下一个时间段让这个删除的节点显示到页面,这时候就可以使用detach方法来处理。
让一个web元素托管。即从当前页面中移除该元素,但保留这个元素的内存模型对象。
$('p').click(function(e){
alert(e.target.innerHTML);
});
var p;
$("#bt1").click(function(){
if(!$("p").length){
return;
}
p = $("p").detach();
});
$("bt2").click(function(){
$("body").append(p);
});
(4)detach()和remove()区别