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. 流水线策略 相关算法 Tomasulo算法与记分牌调度算法

    设计流水线策略时,可参考 Tomasulo算法与记分牌调度算法  (这两个是霍老师推荐的算法,自己未了解过)

  2. Hive substr 函数截取字符串

    开发中,经常进行模糊查询或者进行截取字符串进行模糊匹配,常用的就是substr函数或者substring函数. 使用语法: substr(string A, int start),substring( ...

  3. SpringCloud系列十一：自定义Feign

    1. 回顾 上文我们讲解了如何为服务消费者配置Feign. 在Spring Cloud中,Feign的默认配置类是FeignClientsConfiguration,该类定义了Feign默认使用的编码 ...

  4. C++学习笔记34 模版的原理

    模版在C++中具有很重要的地位.STL就是大量运用模版写出来的. 模版的长处我就不一一列举了.这里我仅仅说一下模版的原理. 当编译器遇到模版方法定义的时候,编译器进行语法检查,可是并不会编译模版.编译 ...

  5. Knockout JS 演示样例

    五个小样例,来自Knockout JS官方站点. //tutorial 1 //following codes uses to demonstrate observable values and ta ...

  6. C#实现插件的“动态替换”

    如果某个"功能"需要动态更新?这种动态更新,可能是需求驱动的,也可能是为了修改 BUG,面对这种场景,如何实现“热插拔”呢?先解释一下“热插拔”:在系统运行过程动态替换某些功能,不 ...

  7. iOS 音频开发

      音频基础知识 组成 音频文件的组成:文件格式(或者音频容器) + 数据格式(或者音频编码). 文件格式(或音频容器)是用于形容文件本身的格式. 我们可以通过多种不同的方法为真正的音频数据编码.例如 ...

  8. linq基础，正则表达式，.net相关

    声明扩展方法的步骤:类必须是static,方法是static,第一个参数是被扩展的对象,前面标注this.使用扩展方法的时候必须保证扩展方法类已经在当前代码中using.  LINQ:将int数组中大 ...

  9. codeblocks中右键源文件没有Rename选项？

    那是因为你右击的那个文件已经被CB的编辑器打开,关闭即可,你就能看到Rename选项了. 或者更简单,翻到Files那一栏,然后右击某个文件夹选择"Make root"即可,就跟w ...

  10. 小米Note全网通支持7模19频：先发标准版

    2015-06-26 16:42:53 17749 次阅读 9 次推荐 稿源:安卓中国 43 条评论 感谢安卓中国的投递 自古一入电信深似海,从此手机没法买.现在首台全网通小米手机即将诞生.6 月 2 ...