要移除页面上节点是开发者常见的操作，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区别的更多相关文章

  1. DOM节点删除之empty和remove

    DOM节点删除之empty和remove 刚学了新知识,虽然是一个小知识点,但还是忍不住想和大家分享. .empty()是指对该节点后代的删除,结果是清空该节点(该节点里面已无元素). .remove ...

  2. jquery之empty()与remove()区别

    要用到移除指定元素的时候,发现empty()与remove([expr])都可以用来实现.可仔细观察效果的话就可以发现.empty()是只移除了 指定元素中的所有子节点,拿$("p" ...

  3. empty()与remove([expr])的区别.转

    jquery之empty()与remove()区别   要用到移除指定元素的时候,发现empty()与remove([expr])都可以用来实现.可仔细观察效果的话就可以发现.empty()是只移除了 ...

  4. [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别 、remove()区别

    清空元素html("").innerHTML="" 与 empty()的区别 一.清空元素的区别     1.错误做法一:           $(" ...

  5. JavaScript 中 empty、remove 和 detach的区别

    内容 empty.remove 和 detach的区别 jQuery 操作 DOM 之删除节点 方法名 元素所绑定的事件及数据是否也被移除 作用 $(selector).empty() 是 从被选元素 ...

  6. 说一说Jquery中的empty()与remove()的区别和用法

    今天在改一个新人写的代码,好吧,我承认改代码比自己写代码要来的痛苦. 主要是在测试一个table.table中有一列是删除操作.我的删除功能是 这样的,当点击删除的时候,判断这个table中的tr行是 ...

  7. jQuery之empty、remove、detach

    三者都有把元素移除的作用,但细微的差别,造就了它们的使命不同. 最权威的解释当然是jQuery_API咯,下面是API中关于他三儿的部分截取. 一.empty: This method removes ...

  8. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  9. JavaScript 对象、DOM对象、jquery对象的区别、转换详解

    一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...

随机推荐

  1. 每个java初学者都应该搞懂的问题

    对于这个系列里的问题,每个学JAVA的人都应该搞懂.当然,如果只是学JAVA玩玩就无所谓了.如果你认为自己已经超越初学者了,却不很懂这些问题,请将你自己重归初学者行列.内容均来自于CSDN的经典老贴. ...

  2. win7开通共享步骤

    win7开通共享步骤 2017-10-09    11:12:09 个人原创博客,允许转载,转载请注明作者及出处,否则追究法律责任 1,开通来宾账户 2,为来宾账户创建一个空密码 右键我的电脑,管理, ...

  3. ASP.NET MVC编程——视图

    1Razon语法 使用@符号后接C#或VB.NET语句的方式. 基本规则 1)变量 @后直接变量即可 2)代码块 为使用表达式或多行代码,@后跟大括号将多行代码包括在大括号中 3)"+&qu ...

  4. DB2开发系列之一——基本语法

    最近看了些db2开发方面的资料,现做摘要,以供自己和大家参考: 1.变量声明 DECLARE v_salary DEC(9,2) DEFAULT 0.0; DECLARE v_status char( ...

  5. mac安装tensorflow

    tensorflow简介 TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理.Tensor(张量)意味着N维数组,Flow(流)意味着基于数 ...

  6. npm 和bower之间的区别

    (一) npm是node js的包管理器,用来下载安装node js的第三方工具包,也可以用来发布你自己开发的工具包.通过npm可以安装bower,命令如下: npm install -g bower ...

  7. CXF SOAP 及其安全控制

    通过上一篇文章,相信您已经学会了如何使用 CXF 开发基于 SOAP 的 WS 了.或许您目前对于底层原理性的东西还不太理解,心中难免会有些疑问: 什么是 WSDL? 什么是 SOAP? 如何能让 S ...

  8. 记一次sqoop同步到mysql

    工作中需要用到将hive的数据导一份到mysql中,需求是这样的:hive每天会产生一份用户标签(tag)发生变化的结果表user_tag,这份结果同步到mysql中,并且保持一份全量表,存储当前用户 ...

  9. 课堂作业 泛型类-Bag

    自定义泛型类Bag 一.具体代码: 代码连接 二.伪代码: 1.思路: 老师讲完后我的想法是要做出一个类似于List的Bag,首先它的本身是又数组构成的并且是可自动增加长度的,然后实现一些基本的操作, ...

  10. Mybash的实现

    Mybash的实现 要求: 使用fork,exec,wait实现mybash 写出伪代码,产品代码和测试代码 发表知识理解,实现过程和问题解决的博客(包含代码托管链接) 背景知识 1. fork 使用 ...