DOM节点删除中empty和remove区别 -js教程-PHP中文网

首页

web前端

js教程

DOM节点删除中empty和remove区别

一个新手

Sep 29, 2017 am 10:04 AM

emptyremove区别

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

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

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

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

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

//通过empty处理
$(&#39;.hello&#39;).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(&#39;click&#39;, function() {        //通过empty移除了当前p元素下的所有p元素
        //但是本身id=test的p元素没有被删除        $("#test").empty()
    })    </script></body></html>

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

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

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

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

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

//通过remove处理
$(&#39;.hello&#39;).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(&#39;click&#39;, function() {        //删除整个 class=test1的p节点        $(".test1").remove()
    })

    $("button:last").on(&#39;click&#39;, function() {        //找到所有p元素中，包含了3的元素
        //这个也是一个过滤器的处理        $("p").remove(":contains(&#39;3&#39;)")
    })    </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(&#39;click&#39;, function() {        //删除了2个p元素，但是本着没有删除         $("#test1").empty()
    })

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

以上是DOM节点删除中empty和remove区别的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

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

华为GT3 Pro和GT4的差异是什么？Dec 29, 2023 pm 02:27 PM

许多用户在选择智能手表的时候都会选择的华为的品牌，其中华为GT3pro和GT4都是非常热门的选择，不少用户都很好奇华为GT3pro和GT4有什么区别，下面就就给大家介绍一下二者。华为GT3pro和GT4有什么区别一、外观GT4：46mm和41mm，材质是玻璃表镜+不锈钢机身+高分纤维后壳。GT3pro：46.6mm和42.9mm，材质是蓝宝石玻璃表镜+钛金属机身/陶瓷机身+陶瓷后壳二、健康GT4：采用最新的华为Truseen5.5+算法，结果会更加的精准。GT3pro：多了ECG心电图和血管及安

在C语言中，while(1)和while(0)之间的区别是什么？Aug 31, 2023 am 10:45 AM

我们知道在C语言中，'while'关键字用于定义一个循环，该循环根据传递给循环的条件来工作。现在，由于条件可以有两个值，即真或假，所以如果条件为真，则while块内的代码将被重复执行，如果条件为假，则代码将不会被执行。现在，通过将参数传递给while循环，我们可以区分while(1)和while(0)，因为while(1)是一个条件始终被视为真的循环，因此块内的代码将开始重复执行。此外，我们可以说明，传递给循环并使条件为真的不是1，而是如果任何非零整数传递给while循环，则它将被视为真条件，因

win10逻辑分区和主分区的区别Jan 03, 2024 pm 04:17 PM

最近不少小伙伴问小编，win10逻辑分区和主分区的区别是什么，我们大多数电脑，其实都是分为了一个C盘主分区，然后其他的D盘、E盘和F盘等都属于逻辑分区，一般情况下是→然后再建→在扩展分区里面，再创建。下面小编整理了详细的教程，一起来看看吧。win10逻辑分区和主分区区别的详细介绍主分区、扩展分区和逻辑分区的区别简单来说，我们大多数电脑，都是分为了一个C盘主分区，然后其他的D盘、E盘和F盘等都属于逻辑分区，将D盘、E盘、F盘等出了主分区之外的磁盘组合，则就属于一个扩展分区。对于硬盘主分区、扩展分区

win32和win64有什么区别May 29, 2023 pm 05:22 PM

win32和win64的区别是：1、win32是指Microsoft Windows操作系统的32位环境，win64是指Microsoft Windows操作系统的64位版本，比32位版本更加稳定快速；2、win32最高支持2G的内存，win64必须是4G以上内存；3、win64支持基于64位的处理器，而win32却不能完全支持；4、win32追求简洁，win64追求性能。

在C语言中，结构体（Structure）和数组（Array）之间的区别是什么？Aug 30, 2023 pm 09:37 PM

在C中，结构体和数组都用作数据类型的容器，即在结构体和数组中我们都可以存储数据，也可以对它们执行不同的操作。基于内部实现，以下是两者之间存在一些基本差异。Sr.编号键结构数组1定义结构体可以定义为一种数据结构，用作容器，可以容纳不同类型的变量。另一方面，数组是一种用作容器的数据结构，可以容纳相同类型的变量，但不支持多种数据类型变量。2内存分配输入数据的内存分配结构不必位于连续的内存位置。而在数组的情况下，输入数据存储在连续的内存分配中，这意味着数组将数据存储在分配连续内存块的内存模型中（即，具有

JavaScript和PHP的cookie之间有哪些区别？Sep 02, 2023 pm 12:29 PM

JavaScriptCookie使用JavaScriptcookie是记住和跟踪偏好、购买、佣金和其他信息的最有效方法。更好的访问者体验或网站统计所需的信息。PHPCookieCookie是存储在客户端计算机上的文本文件并保留它们用于跟踪目的。PHP透明地支持HTTPcookie。JavaScriptcookie如何工作？您的服务器将一些数据发送到访问者的浏览器cookie的形式。浏览器可以接受cookie。如果存在，它将作为纯文本记录存储在访问者的硬盘上。现在，当访问者到达站点上的另一个页面时

win7企业版与win7旗舰版有什么区别的详细介绍Jul 14, 2023 pm 08:37 PM

win7有好几个版本，对于这些琳琅满目的win7版本，很多朋友也是不知道这些win7版本有什么区别了，功能上哪个更好，哪个系统更适合自己，这里小编和大家介绍下win7企业版与win7旗舰版有什么区别的详细介绍，大家快来看看吧。1、Windows7企业版(Enterprise)这个版本面向企业市场的高级版本，主要对象是企业用户以及其市场，满足企业数据共享、管理、安全等需求。包含多语言包、UNIX应用支持、BitLocker驱动器加密、分支缓存(BranchCache)等。通过大量授权给有与微软签订

Vue3和Vue2的区别：更丰富的生命周期钩子Jul 08, 2023 pm 05:19 PM

Vue3和Vue2的区别：更丰富的生命周期钩子Vue是一种流行的JavaScript框架，用于构建交互式的Web应用程序。Vue2是Vue.js的稳定版本，而Vue3是Vue.js的最新版本。Vue3带来了许多改进，其中之一是更丰富的生命周期钩子。本文将介绍Vue3和Vue2生命周期钩子的区别，并通过代码示例进行演示。Vue2的生命周期钩子在Vue2中，我们

See all articles