DOM节点删除之empty和remove

刚学了新知识，虽然是一个小知识点，但还是忍不住想和大家分享。

.empty()是指对该节点后代的删除，结果是清空该节点（该节点里面已无元素）。

.remove()是指删除该节点，结果是删除该节点(该节点及其后代元素都将不存在)。

下面放代码来说明。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js "></script>
    <style>
        body{
            background: #ffe5aa;
        }
        #test1{
            width:100px;
            height:100px;
            background: #3db7ff;
        }
        #test2{
            width:100px;
            height:100px;
            background: #ff179f;
        }
    </style>
</head>
<body>
    <div class="whole">
        <button class="bt1">通过empty删除节点</button>
        <button class="bt2">通过remove删除节点</button>
    </div>
    <div id="test1">
        <p>元素1</p>
        <p>元素2</p>
    </div>
    <div id="test2">
        <p>元素3</p>
        <p>元素4</p>
    </div>
    <script type="text/javascript">
        $(".bt1").on('click',function(){
            $("#test1").empty();
        })
         $(".bt2").on('click',function(){
            $("#test2").remove();
        })
    </script>
</body>
</html>
点击运行后，出现以下画面。

点击button1,将执行.empty()指令，预期将删除test1子节点元素。结果如下。

再点击button2,将执行.remove()指令。预期将删除test2及其后代子节点元素。结果如下。

以上就是DOM节点删除之empty和remove的区别，第一次写博客，不好请谅解。

DOM节点删除之empty和remove的更多相关文章

  1. DOM节点删除之empty和remove区别

    要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题,这里我们开仔细了解下empty和remove方法 empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只 ...

  2. jQuery之empty、remove、detach

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

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

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

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

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

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

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

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

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

  7. js empty() vs remove()

    转自:jQuery empty() vs remove() empty() will remove all the contents of the selection. remove() will r ...

  8. JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用

    html方法,给元素添加html代码或者清空html代码(参数为空字符串): append向元素的末尾添加html代码: appendTo这个方法跟append方法的很像,只是要添加的html代码的目 ...

  9. jQuery文档操作--empty()和remove()

    empty() 概述 删除匹配的元素集合中所有的子节点 <!DOCTYPE html> <html> <head> <meta charset="U ...

随机推荐

  1. Javascript实战开发：教你使用raphael.js绘制中国地图

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...

  2. Python开发环境Wing IDE 5.0测试第八版发布

    Wing IDE是著名的Python开发工具,是Wingware公司的主要产品.从1999年起,Wingware公司便开始专注于Python开发设计.Wing IDE在十几年的发展中,不管完善.其强大 ...

  3. SSMS2008插件开发(4)--自定义菜单

    原文:SSMS2008插件开发(4)--自定义菜单 打开上次的项目MySSMSAddin中的Connect类,发现该类继于了两个接口:IDTExtensibility2和IDTCommandTarge ...

  4. Ubuntu 14.04 字体设置

    ubuntu 14.04消息公布后,我迫不及待地安装和使用.不知道怎么搞的,整个系统彻底改变了字体.有罪,看. 后来.听说文泉驿米黑效果不错.就试了一下,确实还行. 以下是设置方法: 1.安装文泉驿米 ...

  5. 校验、AJAX与过滤器

    随笔- 65  文章- 1  评论- 343  ASP.Net MVC开发基础学习笔记:四.校验.AJAX与过滤器   一.校验 — 表单不是你想提想提就能提 1.1 DataAnnotations( ...

  6. Mysql个人语句笔记

    --一些简单语句记录: /*mysql*/SHOW DATABASES CREATE DATABASE guoDROP DATABASE guo /*查看创建的数据库*/SHOW CREATE DAT ...

  7. 【值得收藏】绘图工具Origin的学习资料汇编【可免费下载】

    Origin使用教程 Origin为OriginLab公司出品的较流行的专业函数绘图软件,是公认的简单易学.操作灵活.功能强大的软件,既可以满足一般用户的制图需要,也可以满足高级用户数据分析.函数拟合 ...

  8. 算法打基础——符号&递归解法

    第二节 算法复杂度分析的的基本符号及 递归关系式下的复杂度解法 这次的主要知识点是: 1.各种复杂度符号  2.递归复杂度解法: 分为三种 替换法(猜!)   递归树法    主定理 1各种复杂度符号 ...

  9. [整理]Breakpoint on arbitrary selector

    基本解释了最近在调试时遇到的一些疑问,接下来就是找解决方法了. //-- Begin: 1 T __mh_execute_header 0000000005614542-000000 OPT radr ...

  10. TOGAF架构能力框架之架构能力建设和架构治理

    TOGAF架构能力框架之架构能力建设和架构治理 为了确保架构功能在企业中能够被成功地运用,企业需要通过建立适当的组织结构.流程.角色.责任和技能来实现其自身的企业架构能力,而这也正是TOGAF的架构能 ...