删除节点

JQuery提供了两种删除节点的方法：remove()、detach()

一种清除节点后代元素的方法：empty()

remove():remove()方法从DOM 中删除所有匹配的元素，传入的参数用于根据jQuery 表达式来筛选元素。
当某个节点用remove（）方法删除后，该节点所包含的所有后代节点将同时被删除。
这个方法的返回值是一个指向己被删除的节点的引用，因此可以在以后再使用这些元素。
$("p").remove();

detach():detach() 方法移除被选元素，包括所有文本和子节点。
   这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。
   detach() 会保留所有绑定的事件、附加的数据
   $("p").detach();

empty():empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点

remove()和detach()方法的比较：

二者的共同点：

都会将匹配到的元素完全删除

都不会将匹配的元素从jQuery对象中删除

二者的不同点：

remove()会将匹配元素所绑定的事件一起移除，即使匹配元素的jQuery对象重新添加到界面，之前的事件也不会再起作用

detach()则不会移除绑定在匹配元素上的事件，将匹配元素的jQuery对象重新添加到界面，该元素绑定的事件及附加元素依然有效

案例源码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  	// 待删除的p标签的jquery对象
    var a = $("p");	
   	// 给p标签添加点击事件
	$("p").click(function(){
		alert("remove()和detach()的区别");
	})
	
	// detach()删除节点
	$("button:first").click(function(){
	  	$("p").detach();
	})
  	// remove()删除节点
	$("button:eq(1)").click(function(){
	  	$("p").remove();
	})
	// empty()清除后代节点
	$("button:eq(2)").click(function(){
	 	$("p").empty();
	})
	// 通过jQuery对象重新将p标签添加到body里
	$("button:eq(3)").click(function(){
	 	$("body").prepend(a);
	})
	
  
});
</script>
</head>

<body>
<p>This is a paragraph.</p>

<button>删除 p 元素(detch()方法删除)</button>
<button>删除 p 元素(remove()方法删除)</button><br />
<button>清除p 标签内的内容(empty()方法清除)</button><br />
<button>重新添加p元素(通过jquery对象添加)</button>
</body>
</html>

结果展示：

触发p标签的点击事件：

remove()和detach()作用后：

可以看到，内容已经删除掉了，通过看右边的代码，body内的<p>标签也已经删除了

detach()删除内容后，重新添加，p标签的点击事件依然有效

remove()删除内容后，重新添加，p标签的点击事件失效

注意！！！：

运行案例代码时，remove()删除元素重新添加，然后detach()删除元素再添加

此时，<p>标签没有点击事件，remove()已将其移除

JQueryDOM之删除节点

empty()作用后：

页面上内容已经消失，看起来跟remove()还有detach()方法很类似，

但是通过看代码可以发现<p>标签还是存在的，只是内容清除了，所以empty()只是删除后代节点

JQueryDOM之删除节点

JQueryDOM之删除节点

删除节点

remove()和detach()方法的比较：

案例源码：

结果展示：

相关推荐