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

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

要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题,这里我们开仔细了解下empty和remove方法

empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点。

这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本。因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML:


<div class="hello"><p>这是p标签</p></div>

如果我们通过empty方法移除里面div的所有元素,它只是清空内部的html代码,但是标记仍然留在DOM中


//通过empty处理
$('.hello').empty()

//结果:<p>这是p标签</p>被移除
<div class="hello"></div>

通过empty移除了当前div元素下的所有p元素,但是本身id=test的div元素没有被删除


<!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>
div {
background: #bbffaa;
width: 300px;
}
</style>
</head>

<body>
<h2>通过empty移除元素</h2>
<div id="test">
<p>p元素1</p>
<p>p元素2</p>
</div>
<button>点击通过jQuery的empty移除元素</button>
<script type="text/javascript">
$("button").on('click', function() {
//通过empty移除了当前div元素下的所有p元素
//但是本身id=test的div元素没有被删除
$("#test").empty()
})
</script>
</body>

</html>

remove与empty一样,都是移除元素的方法,但是remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。

例如一段节点,绑定点击事件


<div class="hello"><p>这是P段落</p></div>
$('.hello').on("click",fn)

如果不通过remove方法删除这个节点其实也很简单,但是同时需要把事件给销毁掉,这里是为了防止”内存泄漏”,所以前端开发者一定要注意,绑了多少事件,不用的时候一定要记得销毁

通过remove方法移除div及其内部所有元素,remove内部会自动操作事件销毁方法,所以使用使用起来非常简单


//通过remove处理
$('.hello').remove()
//结果:<div class="hello"><p>这是P段落</p></div> 全部被移除 //节点不存在了,同事事件也会被销毁