JQueryDOM之删除节点_juequry 删除dom里面全部节点-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41298721/article/details/87894018

本文详细介绍了JQuery中三种删除节点的方法：remove(), detach() 和 empty() 的使用区别。remove() 和 detach() 均可从DOM中移除元素，但detach() 保留事件绑定；empty() 则仅清空元素内容而不删除节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

删除节点

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>