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

首页

web前端

js教程

DOM节点删除中empty和remove区别

一个新手

Sep 29, 2017 am 10:04 AM

empty remove 区别

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

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7536

CakePHP 教程

1379

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

char与wchar_t在C语言中的区别 Apr 03, 2025 pm 03:09 PM

在 C 语言中，char 和 wchar_t 的主要区别在于字符编码：char 使用 ASCII 或扩展 ASCII，wchar_t 使用 Unicode；char 占用 1-2 个字节，wchar_t 占用 2-4 个字节；char 适用于英语文本，wchar_t 适用于多语言文本；char 广泛支持，wchar_t 依赖于编译器和操作系统是否支持 Unicode；char 的字符范围受限，wchar_t 的字符范围更大，并使用专门的函数进行算术运算。

c#多线程和异步的区别 Apr 03, 2025 pm 02:57 PM

多线程和异步的区别在于，多线程同时执行多个线程，而异步在不阻塞当前线程的情况下执行操作。多线程用于计算密集型任务，而异步用于用户交互操作。多线程的优势是提高计算性能，异步的优势是不阻塞 UI 线程。选择多线程还是异步取决于任务性质：计算密集型任务使用多线程，与外部资源交互且需要保持 UI 响应的任务使用异步。

C语言 sum 的作用是什么？ Apr 03, 2025 pm 02:21 PM

C语言中没有内置求和函数，需自行编写。可通过遍历数组并累加元素实现求和：循环版本：使用for循环和数组长度计算求和。指针版本：使用指针指向数组元素，通过自增指针遍历高效求和。动态分配数组版本：动态分配数组并自行管理内存，确保释放已分配内存以防止内存泄漏。

c语言函数的基本要求有哪些 Apr 03, 2025 pm 10:06 PM

C语言函数是代码模块化和程序搭建的基础。它们由声明（函数头）和定义（函数体）组成。C语言默认使用值传递参数，但也可使用地址传递修改外部变量。函数可以有返回值或无返回值，返回值类型必须与声明一致。函数命名应清晰易懂，使用驼峰或下划线命名法。遵循单一职责原则，保持函数简洁性，以提高可维护性和可读性。

char和unsigned char的区别是什么 Apr 03, 2025 pm 03:36 PM

char 和 unsigned char 是存储字符数据的两种数据类型，主要区别在于处理负数和正数的方式：值范围：char 有符号 (-128 到 127)，unsigned char 无符号 (0 到 255)。负数处理：char 可以存储负数，unsigned char 不能。位模式：char 最高位表示符号，unsigned char 无符号位。算术运算：char 和 unsigned char 作为有符号和无符号类型，其算术运算方式不同。兼容性：char 和 unsigned char

H5和小程序与APP的区别 Apr 06, 2025 am 10:42 AM

H5、小程序和APP的主要区别在于：技术架构：H5基于网页技术，小程序和APP为独立应用程序。体验和功能：H5轻便易用，功能受限；小程序轻量级，交互性好；APP功能强大，体验流畅。兼容性：H5跨平台兼容，小程序和APP受平台限制。开发成本：H5开发成本低，小程序中等，APP最高。适用场景：H5适合信息展示，小程序适合轻量化应用，APP适合复杂功能应用。