实例详解基于DOM之empty和remove的区别-js教程-PHP中文网

首页

web前端

js教程

实例详解基于DOM之empty和remove的区别

小云云

Dec 29, 2017 am 09:44 AM

emptyremove基于

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

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

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

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

<p class="hello"><p>这是p标签</p></p>

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

//通过empty处理
$('.hello').empty()

//结果：<p>这是p标签</p>被移除
<p class="hello"></p>

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

<!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>
  p {
    background: #bbffaa;
    width: 300px;
  }
  </style>
</head>

<body>
  <h2>通过empty移除元素</h2>
  <p id="test">
    <p>p元素1</p>
    <p>p元素2</p>
  </p>
  <button>点击通过jQuery的empty移除元素</button>
  <script type="text/javascript">
  $("button").on('click', function() {
    //通过empty移除了当前p元素下的所有p元素
    //但是本身id=test的p元素没有被删除
    $("#test").empty()
  })
  </script>
</body>

</html>

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

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

<p class="hello"><p>这是P段落</p></p>
$('.hello').on("click",fn)

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

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

//通过remove处理
$('.hello').remove()
//结果：<p class="hello"><p>这是P段落</p></p> 全部被移除 //节点不存在了,同事事件也会被销毁

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>
  <p class="test1">
    <p>p元素1</p>
    <p>p元素2</p>
  </p>
  <p class="test2">
    <p>p元素3</p>
    <p>p元素4</p>
  </p>
  <button>通过点击jQuery的empty移除元素</button>
  <button>通过点击jQuery的empty移除指定元素</button>
  <script type="text/javascript">
  $("button:first").on('click', function() {
    //删除整个 class=test1的p节点
    $(".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 p,
  .right p {
    width: 100px;
    height: 90px;
    padding: 5px;
    margin: 5px;
    float: left;
    border: 1px solid #ccc;
  }
  
  .left p {
    background: #bbffaa;
  }
  
  .right p {
    background: yellow;
  }
  </style>
</head>

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

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

</html>

相关推荐：

php中函数is_null，isset，empty的介绍

css中的关于empty-cells的问题

css table中empty-cells属性的具体分析

以上是实例详解基于DOM之empty和remove的区别的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

PHP判断某个数组中是否存在指定的keyMar 21, 2024 pm 09:21 PM

这篇文章将为大家详细讲解有关PHP判断某个数组中是否存在指定的key，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。PHP判断某个数组中是否存在指定的key：在php中，判断某个数组中是否存在指定的key的方法有多种：1.使用isset()函数：isset($array["key"])该函数返回布尔值，如果指定的key存在，则返回true，否则返回false。2.使用array_key_exists()函数：array_key_exists("key",$arr

使用C#中的StringBuilder.Remove函数删除字符串中的指定部分Nov 18, 2023 pm 01:28 PM

使用C#中的StringBuilder.Remove函数删除字符串中的指定部分在C#中，StringBuilder类是一个可变的字符串类型，它允许我们进行字符串的修改和操作。而StringBuilder的Remove函数提供了一种方便的方式来删除字符串中的指定部分。StringBuilder.Remove函数的用法如下：publicStringBuilde

remove是什么意思Aug 04, 2023 am 11:29 AM

remove是从数据结构中删除一个元素、节点或字符的意思，具体的实现方式取决于所使用的编程语言和数据结构。无论是数组、链表还是字符串，remove操作都是程序员经常使用的操作之一，对于数据处理和算法实现都非常重要。

PHP函数介绍—empty(): 检查变量是否为空Jul 25, 2023 am 10:23 AM

PHP函数介绍—empty():检查变量是否为空在PHP编程中，经常需要对变量进行判断，判断变量是否为空是一个常见的需求。而PHP内置的empty()函数就是用来检查变量是否为空的。本文将介绍empty()函数的用法以及提供一些实际的代码示例。empty()函数的用法非常简单，它接受一个参数，并返回一个布尔值。当参数的值为以下情况之一时，empty()函数

使用java的ArrayList.remove()函数移除指定索引位置的元素Jul 27, 2023 pm 12:51 PM

使用Java的ArrayList.remove()函数移除指定索引位置的元素在Java集合框架中，ArrayList是一个动态数组，它提供了许多方便的方法来操作和管理元素。其中，remove()是ArrayList类的一个很常用的函数之一。remove()函数可以根据索引位置来移除ArrayList中的元素。下面我们来看一下使用ArrayList.remov

基于时间序列的异常检测问题Oct 09, 2023 pm 04:33 PM

基于时间序列的异常检测问题，需要具体代码示例时间序列数据是在时间上按照一定的顺序记录的数据，例如股票价格、气温变化、交通流量等。在实际应用中，对于时间序列数据的异常检测具有重要的意义。异常值可以是与正常数据不一致的极端值、噪声、错误数据，或者是某种特定情况下的突发事件。异常检测能够帮助我们发现这些异常情况，从而采取相应的措施。针对时间序列的异常检测问题，常用

如何在C中使用vector的删除功能Feb 18, 2024 am 11:29 AM

C中vector的remove用法，需要具体代码示例介绍：C语言中的vector是一种动态数组，其大小可以在运行时进行调整。它是一种非常常用的数据结构，用于存储和操作多个对象。在实际应用中，我们经常需要向vector中插入新元素或者删除已有元素。本文将详细介绍C语言中vector的remove用法，并给出相应的代码示例。vector的remove函数原型：v

Java使用ArrayList类的remove()函数删除集合中的元素Jul 24, 2023 pm 09:17 PM

Java使用ArrayList类的remove()函数删除集合中的元素ArrayList是Java中常用的集合类之一，它提供了一种动态数组的实现。ArrayList可以存储不同类型的元素，并且可以随时根据需要进行增加和删除操作。在ArrayList中，我们常常需要删除集合中的特定元素。Java提供了remove()函数来实现这一功能。接下来，我们将详细介绍如

See all articles