DDR爱好者之家

基于DOM节点删除之empty和remove的区别(详解)
站长资源 2024/11/27 佚名
31 1538
DDR爱好者之家 Design By 杰米

要移除页面上节点是开发者常见的操作，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="/UploadFiles/2021-04-02/jquery-1.9.1.min.js">


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> 全部被移除 //节点不存在了,同事事件也会被销毁







remove表达式参数：


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


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





<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="/UploadFiles/2021-04-02/jquery-1.9.1.min.js">


要用到移除指定元素的时候，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="/UploadFiles/2021-04-02/jquery-1.9.1.min.js">


以上这篇基于DOM节点删除之empty和remove的区别(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。


                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米