DOM节点删除之empty和remove区别

最新推荐文章于 2020-05-31 15:03:21 发布

♕时光以北暮南城

最新推荐文章于 2020-05-31 15:03:21 发布

阅读量183

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_43742368/article/details/106358914

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
	/*empty方法：
	  1.严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
	  2.empty不能删除自己本身这个节点
  	 remove方法：
	  1.该节点与该节点所包含的所有后代节点将同时被删除
  	  2.提供传递一个筛选的表达式，删除指定合集中的元素*/
    $(document).ready(function() {
		 $(".qq").on('click', function(){
			$(".qq").empty();//删除aa下的所有元素
		})
        $(".aa").on('click', function(){
			$(".aa").remove();//删除整个div块及元素
		})
		 $(".bb").on('click', function(){
			 $("span").remove(":contains('阿姨')");//删除所内容中有含有“阿姨”的span
		})
    });    
    </script>
    <style>
		.qq{
			width:150px;
			height:150px;
			margin:10px;
			background-color:yellow;
			}
   		.aa{
			width:150px;
			height:150px;
			margin:10px;
			background-color:red;
			}
		.bb{
			width:150px;
			height:150px;
			margin:10px;
			background-color:green;
			}
		.cc{
			width:150px;
			height:150px;
			margin:10px;
			background-color:blue;
			}
    </style>
</head>

<body>
<div class="qq">
	<span>111</span>
	<span>222</span>
</div>
<div class="aa">
	<span>大姑娘</span>
	<span>小姑娘</span>
</div> 
<div class="bb">
	<span>大姑娘</span>
	<span>小姑娘</span>
    <span>老阿姨</span>
</div> 
<div class="cc">
	<span>大姑娘</span>
	<span>小姑娘</span>
    <span>老阿姨</span>
</div>     
</body>

</html>

点击前
在这里插入图片描述
点击后

♕时光以北暮南城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM节点删除之empty和remove区别

<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="../jquery-1.10.2.min.js"></script> <script type="text/javas
复制链接

扫一扫