jQuery中提供了三种删除节点的方法：remove()、detach()、empty()，本文详细分析这三种方法。

　　最容易区分的是empty()，该方法严格上属于“清空节点”，即删除其子节点，自身并不会删除。举个栗子：

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>remove和detach对比</title>

     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

     <script type="text/javascript">

     $(function(){

         $(".apple").click(function(){alert('我是苹果');});

         var $apple = $(".apple");

         //empty()

          $(".delete").click(function(){

              $apple.empty();

          });

          $(".add").click(function(){

              $apple.text("苹果");

          });

     });

     </script>

 </head>

 <body>

     <div>

         <ul>

             <li>香蕉</li>

             <li>草莓</li>

             <li>橘子</li>

             <li style="color:red;" class="apple">苹果</li>

         </ul>

         <button class="delete">点击删除</button>

         <button class="add">点击添加</button>

     </div>

 </body>

 </html>

　　删除前：

　　删除后：

　　empty()方法很容易理解。下面重点分析一下remove()和detach()方法：

　　remove()：删除所有后代节点及自身，与该节点绑定的事件删除后也将解除绑定。同样使用上面的栗子，js代码如下：

         //remove--节点删除后，绑定的事件也会解除。

         $(".delete").click(function(){

             $apple.remove();

         });

         $(".add").click(function(){

             $apple.appendTo("ul");

         });

　　删除前，点击“苹果”，会跳出提示信息：

　　删除后：

　　

　　点击添加后，能够得到删除前一样的效果，但是点击“苹果”时不会出现提示框，说明原来绑定的click()事件解除了。

　　

　　detach()：删除所有后代节点及自身，但与该节点绑定的事件删除后依然保留。js代码：

         //detach--节点删除后，绑定的事件依然存在，可继续使用。

         $(".delete").click(function(){

             $apple.detach();

         });

         $(".add").click(function(){

             $apple.appendTo("ul");

         });

　　删除后再次添加节点，点击“苹果”会保留删除前的绑定信息，即弹出提示信息。

　　全文完，欢迎各位朋友批评指正！

jQuery中删除节点方法remove()、detach()、empty()分析的更多相关文章

  1. Jquery中删除元素方法

    empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...

  2. jQuery的删除的三种方法remove(),detach(),empty()

    remove()方法是从DOM中删除所有匹配的元素,包括匹配元素的子元素.但是他会有一个返回值, 返回值是一个指向已被删除的节点的引用,所以说,remove删除的元素,还可以再回收利用. var $l ...

  3. jquery 中一些 特殊方法 的特殊使用 一览表

    cnblogs的页面, 一种是管理页面, 是随笔的列表 a full list of essays. 另一种是 首页. 要搜索文档的话, 就使用 "首页"的那种方式. 一个jque ...

  4. jQuery中的节点操作(一)

    html代码如下 <p>Dom操作练习</p> jQuery插入节点 $("p").append("武汉php"); //向每个匹配的元 ...

  5. 解决关于jquery中$.get(）方法总是报“HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy”错的方法

    解决关于jquery中$.get()方法总是报“HierarchyRequestError: Node cannot be inserted at the specified point in the ...

  6. jquery中的ajax方法参数

    引用来自:http://www.cnblogs.com/tylerdonet/p/3520862.html jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String ...

  7. HTML5中的data-*属性和jQuery中的.data()方法使用

    原文地址链接:http://blog.csdn.net/fly_zxy/article/details/50687691: HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义 ...

  8. jquery中的ajax方法

    $.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...

  9. jQuery 中的 unbind() 方法

    jQuery 中的 unbind() 方法是 bind() 方法的反向操作,从每一个匹配的元素中删除绑定的事件. 语法结构: unbind([type][, data]); type是事件类型,dat ...

随机推荐

  1. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅—— 摘要

    首次接触asp.net开发,希望把自己的学习之旅写下来,一方面做个知识归纳技术总结,另一方面开放到博客中,和大家一起交流学习! asp.net是目前流行的web开发技术之一,是微软旗下开发的基于.ne ...

  2. wp8 各种启动器

    PhoneCallTask  打电话 需要 ID_CAP_PHONEDIALER Windows Phone 8, Windows Phone OS 7.1

  3. Codeforces 460E Roland and Rose(暴力)

    题目链接:Codeforces 460E Roland and Rose 题目大意:在以原点为圆心,半径为R的局域内选择N个整数点,使得N个点中两两距离的平方和最大. 解题思路:R最大为30.那么事实 ...

  4. centos6.5下redis的安装与配置

    参照官网描述(https://redis.io/download),linux下redis安装步骤如下: $ wget http://download.redis.io/releases/redis- ...

  5. 工业控制系统PLC、DCS、ESD

    PLC:可编程逻辑控制系统.PLC是一种专为在工业环境应用而设计的数字运算电子系统. DCS:集散控制系统. ESD:紧急停车系统.

  6. [Android]通知栏与操作栏的高度-State Bar & Navigation Bar

    1.通知栏 public static int getStatusBarHeight() { Resources resources = Resources.getSystem(); int reso ...

  7. Linux下批量删除空文件

    Linux下批量删除空文件(大小等于0的文件)的方法 find . -name "*" -type f -size 0c | xargs -n 1 rm -f 用这个还能够删除指定 ...

  8. jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、

    脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面 ...

  9. 集合Set映射一对多（使用xml文件）

    如果持久化类设置了包含实体引用的对象,则需要使用一对多关联来映射集合(Set)元素. 我们可以通过任意一个Set集合来映射这个列表对象. 下面来看看看设置对象的持久化类. 在这种情况下,一个问题可以有 ...

  10. 【翻译自mos文章】当点击完 finishbutton后，dbca 或者dbua hang住

    当点击完 finishbutton后,dbca 或者dbua hang住 来源于: DBCA/DBUA APPEARS TO HANG AFTER CLICKING FINISH BUTTON (文档 ...