首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:26:57
字体:
来源:转载
供稿:网友

要移除页面上节点是开发者常见的操作,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> 全部被移除 //节点不存在了,同事事件也会被销毁

remove表达式参数:

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选