当前位置: 首页 > 编程笔记 >

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

薛经艺
2023-03-14
本文向大家介绍基于DOM节点删除之empty和remove的区别(详解),包括了基于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中DOM节点删除之empty与remove,包括了jQuery中DOM节点删除之empty与remove的使用技巧和注意事项,需要的朋友参考一下 前言 最近刚学了新知识,虽然是一个小知识点,但还是忍不住想和大家分享。本文的内容主要针对的是初学者,如果大家有什么意见或者问题都可以留言交流的,下面来看看详细的介绍吧。 .empty()是指对该节点后代的删除,结果是清空该节点(

  • 在本章中,我们将学习XML DOM删除节点的操作。删除节点操作是指从文档中删除指定的节点。实现此操作以移除诸如文本节点,元素节点或属性节点之类的节点。 以下是用于删除节点操作的方法 - 方法 方法 1. removeChild()方法 方法从子列表中删除指示的子节点,并将其返回。 删除子节点等同于删除文本节点。 因此,删除子节点会删除与其关联的文本节点。 语法 使用方法的语法如下 - 其中, -

  • 要检查向量是否为空,我可以使用或。我查看了cplike上的签名,但缺乏理解它们的知识。它们如何相互关联?一个实现调用另一个实现吗? 我知道其中一个来自容器库,另一个来自迭代器库,但仅此而已。

  • 我想通过像delete*这样的查询删除整个节点,其中user_id=“-KTruPWrYO9WFj-TF8Ft”如何在firebase上实现?

  • 问题内容: 我正在使用Oracle数据库,但对Drop和Purge命令有些困惑。实际上,对于我来说,两者都做同样的事情。从数据库中删除带有模式的表。两者的主要区别是什么? 删除表表名; 删除表表名清除; 问题答案: 通常,如果表被删除,则将其移入回收站(从Oracle 10g开始)。但是,如果还指定了purge修饰符,则无法从数据库中删除(完全)删除该表。

  • 我正在尝试处理这个XML文件,我想根据最新的节点值删除所有匹配的节点。在以下示例中,最新节点值为“${DELETE}”,最新节点值将始终为“${DELETE}”,并且该节点将始终位于XML文件的底部。 示例: 预期产出为: