jQuery中的empty方法和remove方法

最新推荐文章于 2024-01-04 15:02:05 发布

野菌桃

最新推荐文章于 2024-01-04 15:02:05 发布

阅读量802

点赞数 1

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/YJT180/article/details/103015744

版权

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文深入解析了jQuery中empty和remove方法的区别与应用。empty方法仅清除匹配元素的子节点，保留元素自身；remove方法则完全移除匹配元素，包括其子节点。通过实例展示了两种方法在网页元素操作中的具体效果。

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

empty方法：删除匹配的元素集合中所有的子节点;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="jquery-3.3.1.js"></script>
	</head>
	<body>
		<p><span>I </span><b>Love You.</b></p>
		<script>
			$("p").empty();
		</script>
	</body>
</html>

效果为：

可以看到p标签中原来的子内容都被清空了，但p标签本身仍然还存在

remove方法：删除匹配元素；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="jquery-3.3.1.js"></script>
	</head>
	<body>
		<p><span>I </span><b>Love You.</b></p>
		<script>
			$("p").remove();
		</script>
		
		<div><span>I </span><span class="letters">Love You.</span></div>
		<script>
			$("span").remove(".letters");//删除class为letters的所有span标签
		</script>
	</body>
</html>

效果为：