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

2024-10-28 02:07:14

要移除页面上节点是开发者常见的操作，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操作之删除节点示例

如果文档中某一个元素多余,那么应将其删除.jQuery提供了两种删除节点的方法,remove()方法和empty()方法. 1. remove(): <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content=&quo
jquery之empty()与remove()区别说明

1.empty()是只移除了指定元素中的所有子节点,拿$("p").empty()来说,他只是把dsfsd中的文本给移除了,而留下了,仍保留其在dom中所占的位置. 2.remove([expr])则是把其从dom中删除,而不会保留其所占的位置. 例:HelloWorldwelcome 执行$("p").empt
jQuery DOM删除节点操作指南

下面示例可能用到如下HTML代码: 复制代码代码如下: <ul> <li title="t1">苹果</li> <li>香蕉</li> <li>橘子</li> <li>葡萄</li> <li>草莓</li> </ul> 1.remove()方法: 作用:从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛
jQuery中DOM节点的删除方法总结（超全面）

前言相信大家都知道,要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题.下面本文就进行一个详细的介绍,感兴趣的朋友们一起来看看吧. 一.empty empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了指定元素中的所有子节点. 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本.因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点.如果我们通过empty方法移除里面div的所有元素,它只是清空内部的html代码,但是标记仍
JQuery删除DOM节点的方法

本文实例讲述了JQuery删除DOM节点的方法.分享给大家供大家参考.具体分析如下: 如果文档中某一个元素多余,那么应将其删除.JQuery提供了两种删除节点的方法,即remove()和empty(). HTML DOM结构如下: 欢迎访问我们 <ul class="nm_ul"> <li title='PHP编程'>简单易懂的
jQuery中DOM节点删除之empty与remove

前言最近刚学了新知识,虽然是一个小知识点,但还是忍不住想和大家分享.本文的内容主要针对的是初学者,如果大家有什么意见或者问题都可以留言交流的,下面来看看详细的介绍吧. .empty()是指对该节点后代的删除,结果是清空该节点(该节点里面已无元素). .remove()是指删除该节点,结果是删除该节点(该节点及其后代元素都将不存在). 下面放代码来说明. <!DOCTYPE html> <html> <head lang="en"> <meta
基于DOM节点删除之empty和remove的区别(详解)

要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题,这里我们开仔细了解下empty和remove方法 empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了指定元素中的所有子节点. 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本.因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点.请看下面的HTML: <div class="hello">这是p标签</
基于js中style.width与offsetWidth的区别(详解)

作为一个初学者,经常会遇到在获取某一元素的宽度(高度.top值...)时,到底是用 style.width还是offsetWidth的疑惑. 1. 当样式写在行内的时候,如 <div id="box" style="width:100px">时,用 style.width或者offsetWidth都可以获取元素的宽度. 但是,当样式写在样式表中时,如 #box{ width: 100px; }, 此时只能用offsetWidth来获取元素的宽度,而sty
基于js 字符串indexof与search方法的区别(详解)

1.indexof方法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 语法: 注意:有可选的参数(即设置开始的检索位置). 2.search方法 search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串. 注意:search方法可以根据正则表达式查找指定字符串(可以忽略大小写,并且不执行全局检索),同时没有可选参数(即设置开始的检索位置). 以上这篇基于js 字符串indexof与search方法的区别(详解)就是小编分享给大家的全部
基于Django filter中用contains和icontains的区别(详解)

qs.filter(name__contains="e") qs.filter(name__icontains="e") 对应sql 'contains': 'LIKE BINARY %s', 'icontains': 'LIKE %s', 其中的BINARY是精确大小写而'icontains'中的'i'表示忽略大小写以上这篇基于Django filter中用contains和icontains的区别(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考
对python中数组的del,remove,pop区别详解

以a=[1,2,3] 为例,似乎使用del, remove, pop一个元素2 之后 a都是为 [1,3], 如下: >>> a=[1,2,3] >>> a.remove(2) >>> a [1, 3] >>> a=[1,2,3] >>> del a[1] >>> a [1, 3] >>> a= [1,2,3] >>> a.pop(1) 2 >>>
基于python cut和qcut的用法及区别详解

我就废话不多说了,直接上代码吧: from pandas import Series,DataFrame import pandas as pd import numpy as np from numpy import nan as NA from matplotlib import pyplot as plt ages = [20,22,25,27,21,23,37,31,61,45,41,32] #将所有的ages进行分组 bins = [18,25,35,60,100] #使用pandas
C#中string.Empty和null的区别详解

这是一个及其常见的问题,网上已经有关于这个问题的很多讨论.但是我觉得都是不求甚解,有一些还是在误导别人.下面我来说下我对这三者的理解,如有错误的地方请大家及时指正. 一:""与string.Empty我认为是一样的.网上有一篇被转载了几十遍的文章是这样说的string.Empty 不分配存储空间,"" 分配一个长度为空的存储空间,我认为这句话是错误并且含糊不清的. 1.实际上Empty是string类中的一个静态的只读字段,他的定义是这样的: public stat
基于SQL中SET与SELECT赋值的区别详解

最近的项目写的SQL比较多,经常会用到对变量赋值,而我使用SET和SELECT都会达到效果.那就有些迷惑,这两者有什么区别呢?什么时候哪该哪个呢?经过网上的查询,及个人练习,总结两者有以下几点主要区别:假定有设定变量: 复制代码代码如下: DECLARE @VAR1 VARCHAR(1) DECLARE @VAR2 VARCHAR(2) 1.SELECT可以在一条语句里对多个变量同时赋值,而SET只能一次对一个变量赋值,如下: 复制代码代码如下: SELECT @VAR1='Y',@VAR2
基于jquery的on和click的区别详解

使用jQuery写js时,有些用on写行为函数,有些用click,弄清二者区别很重要. 以下是用于测试二者区别的HTML代码. <!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="h

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

相关推荐

随机推荐