jQuery中删除节点方法remove()、detach()、empty()分析
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()分析的更多相关文章
- Jquery中删除元素方法
empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...
- jQuery的删除的三种方法remove(),detach(),empty()
remove()方法是从DOM中删除所有匹配的元素,包括匹配元素的子元素.但是他会有一个返回值, 返回值是一个指向已被删除的节点的引用,所以说,remove删除的元素,还可以再回收利用. var $l ...
- jquery 中一些 特殊方法 的特殊使用 一览表
cnblogs的页面, 一种是管理页面, 是随笔的列表 a full list of essays. 另一种是 首页. 要搜索文档的话, 就使用 "首页"的那种方式. 一个jque ...
- jQuery中的节点操作(一)
html代码如下 <p>Dom操作练习</p> jQuery插入节点 $("p").append("武汉php"); //向每个匹配的元 ...
- 解决关于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 ...
- jquery中的ajax方法参数
引用来自:http://www.cnblogs.com/tylerdonet/p/3520862.html jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String ...
- HTML5中的data-*属性和jQuery中的.data()方法使用
原文地址链接:http://blog.csdn.net/fly_zxy/article/details/50687691: HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义 ...
- jquery中的ajax方法
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...
- jQuery 中的 unbind() 方法
jQuery 中的 unbind() 方法是 bind() 方法的反向操作,从每一个匹配的元素中删除绑定的事件. 语法结构: unbind([type][, data]); type是事件类型,dat ...
随机推荐
- python判断文件是否存在目录中
##支持排除文件和目录#!/usr/bin/python #coding:utf-8 import os def list_file(file_name): data = [] file_name = ...
- Linux在本地使用yum安装软件
经常遇到有的linux服务器由于特殊原因,不能连接外网,但是经常需要安装一些软件,尤其是在编译一些包的时候经常由于没有安装一些依存包而报的各种各样的错误,当你找到依存的rpm包去安装的时候,又提示你有 ...
- 简体字冯|docker-安装docker私有库
原创文章,转载请注明出处. 作者:简体字丶冯; QQ:564372931 安装docker 各终端安装docker 教程 菜鸟docker教程 就挺好,本着不重复造轮子的原则就不深入了,自己学习. 如 ...
- 使用BMap.Label给百度地图的BMap.Marker上加上数字序号
marker = new BMap.Marker(pointList[i]) marker.setLabel(getNumberLabel(i)); function getNumberLabel(n ...
- Atitit.输入法配置说明v1 q229
Atitit.输入法配置说明v1 q229 //------------------------------------------------------ // IME设置 //-------- ...
- Angularjs学习笔记7_directive1
1.基础知识 directive()接受两个参数 · name:字符串,指令的名字 · factory_function:函数,指令的行为 应用启动时,以name作为该应用的标识注册factory_f ...
- Windows Mobile X图标如何销毁窗体而非隐藏
在Windows Mobile窗体上,有“OK”和“X”两种形式按钮.1.在Form的属性里,设置“MinimizeBox=false”,则窗体显示”OK”,点击该按钮窗体销毁并退出.2.设置“Min ...
- iOS开发之多文件上传
// // ViewController.m // B03-多文件上传 // // Created by 0426iOS on 15/7/1. // Copyright (c) 2015年 0 ...
- OSX: bash的更新
本文尽量详述眼下来说的bash补丁的进展,从以下4个方面解释: 最全最新的更新安装包,:Oct 5为止的 測试已知的bash漏洞的脚本:更新后能够用来检測已知bash漏洞的情况 脚本编译更新版本号:也 ...
- input子系统分析（转）
转自:http://www.linuxidc.com/Linux/2011-09/43187.htm 作者:作者:YAOZHENGUO2006 Input子系统处理输入事务,任何输入设备的驱动程序都可 ...