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 相关文章推荐
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
JS实现京东商品分类侧边栏
Dec 11 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
类似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设计模式 Decorator(装饰模式)
2011/06/26 PHP
PHP中设置时区方法小结
2012/06/03 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
destoon之一键登录设置
2014/06/21 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
python一键升级所有pip package的方法
2017/01/16 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
python用户管理系统的实例讲解
2017/12/23 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
Python中字符串与编码示例代码
2019/05/20 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
成教自我鉴定
2013/10/27 职场文书
集体婚礼证婚词
2014/01/13 职场文书
升职自荐信怎么写
2015/03/05 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
《猴王出世》教学反思
2016/02/23 职场文书