DOM节点删除之empty()的基本用法

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

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

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

<div class="hello"><p>慕课网</p></div>

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

//通过empty处理
$('.hello').empty() //结果:<p>慕课网</p>被移除
<div class="hello"></div>

可以参考右边的代码区域:

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

DOM节点删除之remove()的有参用法和无参用法

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

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

<div class="hello"><p>慕课网</p></div>
$('.hello').on("click",fn)

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

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

//通过remove处理
$('.hello').remove()
//结果:<div class="hello"><p>慕课网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁

remove表达式参数:

remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合,可以选择性的删除指定的节点

我们可以通过$()选择一组相同的元素,然后通过remove()传递筛选的规则,从而这样处理

对比右边的代码区域,我们可以通过类似于这样处理

$("p").filter(":contains('3')").remove()

 <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>

DOM节点删除之empty和remove区别

要用到移除指定元素的时候,jQuery提供了empty()与remove([expr])二个方法,两个都是删除元素,但是两者还是有区别

empty方法

  • 严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点
  • empty不能删除自己本身这个节点

remove方法

  • 该节点与该节点所包含的所有后代节点将同时被删除
  • 提供传递一个筛选的表达式,删除指定合集中的元素

<script type="text/javascript">
    $("#bt1").on('click', function() {
        //删除了2个p元素,但是本着没有删除
        $("#test1").empty()
    })

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

DOM节点删除之保留数据的删除操作detach()

如果我们希望临时删除页面上的节点,但是又不希望节点上的数据与事件丢失,并且能在下一个时间段让这个删除的节点显示到页面,这时候就可以使用detach方法来处理

detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素,但保留这个元素的内存模型对象。

来看看jquery官方文档的解释:

这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。
$("div").detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。

当然这里要特别注意,detach方法是JQuery特有的,所以它只能处理通过JQuery的方法绑定的事件或者数据

参考右边的代码区域,通过 $("p").detach()把所有的P元素删除后,再通过append把删除的p元素放到页面上,通过点击文字,可以证明事件没有丢失

<script type="text/javascript">
    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })
    var p;
    $("#bt1").click(function() {
        if (!$("p").length) return; //去重
        //通过detach方法删除元素
        //只是页面不可见,但是这个节点还是保存在内存中
        //数据与事件都不会丢失
        p = $("p").detach()
    });

$("#bt2").click(function() {
        //把p元素在添加到页面中
        //事件还是存在
        $("body").append(p);
    });
    </script>

DOM节点删除之detach()和remove()区别

JQuery是一个很大强的工具库,在工作开发中,有些方法因为不常用到,或是没有注意到而被我们忽略。

remove()和detach()可能就是其中的一个,可能remove()我们用得比较多,而detach()就可能会很少了

通过一张对比表来解释2个方法之间的不同

方法名

参数

事件及数据是否也被移除

元素自身是否被移除

remove

支持选择器表达

是(无参数时),有参数时要根据参数所涉及的范围

detach

参数同remove

情况同remove

remove移除节点

  • 无参数,移除自身整个节点以及该节点的内部的所有节点,包括节点上事件与数据
  • 有参数,移除筛选出的节点以及该节点的内部的所有节点,包括节点上事件与数据

detach移除节点

  • 移除的处理与remove一致
  • 与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来
  • 例如:$("p").detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。

<script type="text/javascript">
    //给页面上2个p元素都绑定时间
    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })

$("button:first").click(function() {
        var p = $("p:first").remove();
        p.css('color','red').text('p1通过remove处理后,点击该元素,事件丢失')
        $("body").append(p);
    });

$("button:last").click(function() {
        var p = $("p:first").detach();
        p.css('color','blue').text('p2通过detach处理后,点击该元素事件存在')
        $("body").append(p);
    });
</script>

jQuery-2.DOM---节点的删除的更多相关文章

  1. 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  2. js进阶 11-12 jquery如何实现节点的删除和复制

    js进阶 11-12  jquery如何实现节点的删除和复制 一.总结 一句话总结:remove().detach().empty()方法 1.jquery删除节点中的remove()方法和detac ...

  3. jQuery克隆DOM节点

    jQuery克隆DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  4. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  5. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

  6. jQuery 获取DOM节点的两种方式

    jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: var dom = $(dom)[0]; 如: $("#id&qu ...

  7. jQuery修炼心得-DOM节点的删除

    要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题. 1.empty empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点. ...

  8. jQuery操作DOM节点的方法总结

    1.parent():获得当前匹配元素集合中每个元素的父元素,该方法只会向上一级对 DOM 树进行遍历 $('li.item-a').parent().css('background-color', ...

  9. jQuery选择器(添加节点及删除节点及克隆及替换及包装)第九节

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作

    html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...

随机推荐

  1. Python sqlalchemy orm 常用操作

    增add # 创建表1 # 注:高级封装 import sqlalchemy # 调用链接数据库 from sqlalchemy import create_engine # 调用基类Base fro ...

  2. UI自动化(三)css优先级

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 剑指offer(35)数组中的逆序对

    题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P%1000 ...

  4. Kaggel比赛 : [Give Me Some Credit]

    通过预测在未来两年内某人将经历财务困境的可能性,改善信用评分的状态. Description 银行在市场经济中扮演着至关重要的角色.他们决定谁可以获得融资,以及什么条件,可以做出或破坏投资决策.为了让 ...

  5. 基本设置_common_setting

    comment(备注) ID(请勿修改) Param(参数) 说明与格式 积分物品ID设置 1 60000 积分属性虚拟货币,存储在Auth库account表TokenAmount字段. 这里设置积分 ...

  6. _skill,_skill_category

    _skill,_skill_category -- 自定义商业技能-- 小技巧:配合增加自定义商业技能._add skill [ID _skill `skillId`商业技能ID `skillIcon ...

  7. 转 flowcanvas

    http://blog.sina.com.cn/s/blog_5fb40ceb0102wveq.html Unity 强大的可视化编程插件,Flowcanvas + Nodecanvas 组合(深度修 ...

  8. js 过滤器

    ,,]; ary[] = ; ary.filter(function(x) { return x === undefined; }); // A. [undefined x 7] // B. [0, ...

  9. vue 2.0 使用replace时要点击路由多次才能返回

    项目中有一个选择机场的需求,从表单页面--->机场页面(选择出发机场)-->表单页面-->机场页面(选择到达机场); 如果只用push跳转的话,页面返回必然会返回机场选择页面. 所以 ...

  10. Listview自定义了子View导致listview的onitemclick事件无效

    原因是子View的点击事件抢占了listview的点击事件 解决办法: 1. 子View根布局 设置 android:descendantFocusability="blocksDescen ...