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 相关文章推荐
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
javascript模仿msgbox提示效果代码
Jun 10 Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
js实现购物车功能
Jun 12 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
类似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
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
详解vue中axios的封装
2018/07/18 Javascript
JS实现打字游戏
2019/12/17 Javascript
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
致200米运动员广播稿
2014/02/06 职场文书
家长对老师的感言
2014/03/11 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
2014年化验员工作总结
2014/11/18 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
教你怎么用Python操作MySql数据库
2021/05/31 Python
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
mysql left join快速转inner join的过程
2021/06/30 MySQL