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. Linux 性能监控 —— Load Average

    一. 简单介绍 top. uptime. cat /proc/loadavg 命令中 Load average: 4.90, 5.51, 5.77        整体含义: 正在执行的任务数量 + 排 ...

  2. Centos使用光盘作为本地yum源

    [root@localhost CentOS]# mkdir /media/CentOS把光盘加载到本地[root@localhost CentOS]# mount /dev/cdrom /media ...

  3. C语言变长參数的认识以及宏实现

    1.认识 变长參数是C语言的特殊參数形式.比如例如以下函数声明: int printf(const char *format, ....); 如此的声明表明,printf函数除了第一个參数类型为con ...

  4. SharePoint管理中心配置内容数据库

    SharePoint管理中心配置内容数据库         在SharePoint2010中,内容数据库是组织数据的核心. 是全部站点内容信息,如文档.列表数据和Web部件属性等存储的地方.默认地,内 ...

  5. Alluxio部署(local模式)

    下载(pre-build for Hadoop 2.7) http://www.alluxio.org/download` 解压 tar -xvf alluxio-1.3.0-hadoop2.7-bi ...

  6. 谈谈 epmd

    在<Erlang/OTP 并发编程实战>中,对 epmd 有如下描述: epmd  代表 Erlang 端口映射守护进程(Erlang Port Mapper Daemon). 每启动一个 ...

  7. a标签跳转新页面

    var url = $("#email_kong").val();       //url=mail.qq.com url = "http://"+url;   ...

  8. CentOS 5 上安装Oracle11g

    原创作品,出自 "深蓝的blog" 博客.欢迎转载.转载时请务必注明下面出处.否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlo ...

  9. Android Otto框架浅析

    今天要介绍的是一个Android中使用得比較多的android 事件总线 EventBus模式的一个框架Otto. Otto 官网:http://square.github.io/otto/ 一.An ...

  10. jQuery实现限制文本框的输入长度

    jQuery限制文本框输入,包含粘贴. //限制文本框的输入长度 $(function () {  $(document).on("keypress", ".txt-va ...