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进行目录上传(相当于批量上传)
Dec 05 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
解决laravel session失效的问题
2019/10/14 PHP
对联广告js flash激活
2006/10/19 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
初步认识Python中的列表与位运算符
2015/10/12 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
网络维护中文求职信
2014/01/03 职场文书
xxx同志考察材料
2014/02/07 职场文书
授权委托书怎么写
2014/04/03 职场文书
应用外语系自荐信
2014/06/26 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers