jQuery删除节点的三个方法即remove()detach()和empty()


Posted in Javascript onDecember 27, 2013

jQuery提供了三种删除节点的方法,即remove(),detach()和empty()。

测试所用HTML代码:

<p title="选择你最喜欢的水果?">你最喜欢的水果是?</p> 
<ul> 
<li title="苹果">苹果</li> 
<li title="橘子">橘子</li> 
<li title="菠萝">菠萝</li> 
</ul>

1、remove()方法
$("ul li").click(function(){ 
alert($(this).html()); 
}); 
var $li = $("ul li:eq(1)").remove(); 
$li.appendTo("ul");

当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。

2、detach()方法

var $li = $("ul li:eq(1)").detach(); 
$li.appendTo("ul");

detach()和remove()一样,也是从DOM中去掉所有匹配的元素。但需要注意的是,这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据都会保留下来。

3、empty()方法

var $li = $("ul li:eq(1)").empty(); 
$li.appendTo("ul");

严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点。
Javascript 相关文章推荐
非常好的js代码
Jun 27 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
原生js实现轮播图
Feb 27 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
原生js实现随机点名
Jul 05 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 #Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 #Javascript
Java/JS获取flash高宽的具体方法
Dec 27 #Javascript
location.href用法总结(最主要的)
Dec 27 #Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 #Javascript
JS去除字符串两端空格的简单实例
Dec 27 #Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 #Javascript
You might like
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python的Template使用指南
2014/09/11 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
详解python 爬取12306验证码
2019/05/10 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
What is view? why do we have view?
2012/06/22 面试题
小学生自我鉴定
2013/10/12 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
环境卫生倡议书
2014/08/29 职场文书
护士自荐信怎么写
2015/03/06 职场文书
社区党支部承诺书
2015/04/29 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python