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

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

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

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

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

这是p标签

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

//通过empty处理

$('.hello').empty()

//结果：

这是p标签

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

p元素1

p元素2

点击通过jQuery的empty移除元素

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

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

$('.hello').on("click",fn)

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

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

//通过remove处理

$('.hello').remove()

//结果：

这是P段落

remove表达式参数：

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

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

p元素1

p元素2

p元素3

p元素4

通过点击jQuery的empty移除元素

通过点击jQuery的empty移除指定元素

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

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

empty方法

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

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

remove方法

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

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

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

点击通过jQuery的empty移除内部P元素

点击通过jQuery的remove移除整个节点

p元素1

p元素2

p元素3

p元素4

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。