基于DOM节点删除之empty和remove的区别(详解)

2020-05-22 15:59:29易采站长站整理

remove表达式参数:

remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合,可以选择性的删除指定的节点

我们可以通过$()选择一组相同的元素,然后通过remove()传递筛选的规则,从而这样处理


<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.test1 {
background: #bbffaa;
}

.test2 {
background: yellow;
}
</style>
</head>

<body>
<h2>通过jQuery remove方法移除元素</h2>
<div class="test1">
<p>p元素1</p>
<p>p元素2</p>
</div>
<div class="test2">
<p>p元素3</p>
<p>p元素4</p>
</div>
<button>通过点击jQuery的empty移除元素</button>
<button>通过点击jQuery的empty移除指定元素</button>
<script type="text/javascript">
$("button:first").on('click', function() {
//删除整个 class=test1的div节点
$(".test1").remove()
})

$("button:last").on('click', function() {
//找到所有p元素中,包含了3的元素
//这个也是一个过滤器的处理
$("p").remove(":contains('3')")
})
</script>
</body>

</html>

要用到移除指定元素的时候,jQuery提供了empty()与remove([expr])二个方法,两个都是删除元素,但是两者还是有区别:

要用到移除指定元素的时候,jQuery提供了empty()与remove([expr])二个方法,两个都是删除元素,但是两者还是有区别

empty方法

严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点

empty不能删除自己本身这个节点

remove方法

该节点与该节点所包含的所有后代节点将同时被删除

提供传递一个筛选的表达式,删除指定合集中的元素

以上就是二者的区别,我们具体通过下边代码部分加深理解


<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.left,
.right {
width: 300px;
}

.left div,
.right div {
width: 100px;
height: 90px;