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

更新时间：2017年09月11日 08:25:02 作者：小周sri的码农

下面小编就为大家带来一篇基于DOM节点删除之empty和remove的区别(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

要移除页面上节点是开发者常见的操作，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好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点

我们可以通过$()选择一组相同的元素，然后通过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;
    padding: 5px;
    margin: 5px;
    float: left;
    border: 1px solid #ccc;
  }
  
  .left div {
    background: #bbffaa;
  }
  
  .right div {
    background: yellow;
  }
  </style>
</head>

<body>
  <h2>通过empty与remove移除元素</h2>
  <div class="left">
    <button id="bt1">点击通过jQuery的empty移除内部P元素</button>
    <button id="bt2">点击通过jQuery的remove移除整个节点</button>
  </div>
  <div class="right">
    <div id="test1">
      <p>p元素1</p>
      <p>p元素2</p>
    </div>
    <div id="test2">
      <p>p元素3</p>
      <p>p元素4</p>
    </div>
  </div>
  <script type="text/javascript">
  $("#bt1").on('click', function() {
    //删除了2个p元素，但是本着没有删除 
    $("#test1").empty()
  })

  $("#bt2").on('click', function() {
    //删除整个节点
    $("#test2").remove()
  })
  </script>
</body>

</html>

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

您可能感兴趣的文章:

jQuery+HTML5美女瀑布流布局实现方法
这篇文章主要介绍了jQuery+HTML5美女瀑布流布局实现方法,涉及jQuery结合HTML5实现瀑布流效果的动态加载功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
jquery 按键盘上的enter事件
系统默认情况下，使用Tab按键切换页面元素的焦点，有没有想过回车键Enter也可以实现这种功能，并且具有良好的用户体验
2014-05-05
用jquery实现动画跳到顶部和底部(这个比较简单)
用jquery实现动画的跳到顶部和底部，当点击顶部按钮的时候，执行方法,scrollTop属性获取选中标签距滚动条的距离
2014-09-09
JQuery 实现在同一页面锚点链接之间的平滑滚动
JQuery 原来比我想象的要强大的多，本文用 JQuery 实现锚点链接之间的平滑滚动，在同一页面的锚点链接之间实现平滑的滚动
2014-10-10
jQuery中isFunction方法的BUG修复
修复 jQuery 中 isFunction 方法的 BUG
2010-01-01
jquery动画效果学习笔记（8种效果）
这篇文章分享了一份jquery动画效果学习笔记，针对jquery动画效果进行细致解析，对淡入淡出效果、滑动效果进行原理讲解，想要学好jquery动画效果，就耐心阅读本文，相信大家会有意想不到的收获。
2015-11-11
浅析bootstrap原理及优缺点
网格系统的实现原理，是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统
2017-03-03
在网站上应该用的30个jQuery插件整理
jQuery插件是网页设计师最喜欢的。从图像滑块，图像画廊和导航插件，它们是如此众多，如此多样，如此惊人的和互动可以制作美化网站
2011-11-11
基于jquery的$.ajax async使用
默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行
2011-10-10
使用jQuery实现简单的tab框实例
下面小编就为大家带来一篇使用jQuery实现简单的tab框实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08