jQuery DOM删除节点操作指南


Posted in Javascript onMarch 03, 2015

下面示例可能用到如下HTML代码:

<ul>

  <li title="t1">苹果</li>

  <li>香蕉</li>

  <li>橘子</li>

  <li>葡萄</li>

  <li>草莓</li>

</ul>

1、remove()方法:

作用:从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素。

例如,删除上图中<ul>节点中的第二个<li>元素节点,jQuery代码如下:

$(document).ready(function() {

   $("ul li:eq(1)").remove();

});

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

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

$li.appendTo("ul");   //把删除的节点又重新添加到<ul>元素里

可以直接使用appendTo()方法的特性来简化以上代码:

$("ul li:eq(1)").appendTo("ul");//appendTo()方法也可以用来移动元素,移动元素时首先从文档上删除此元素,然后将该元素插入到文档中的指定节点。

另外remove()方法也可以通过传递参数来选择性地删除元素:

$("ul li").remove("li[title='t1']");

2、detach()方法:

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

通过下面的例子,可以知道它与remove()方法的区别:

$("ul li").click(function(){

   alert($(this).html());

})

var $li=$("ul li:eq(1)").detach();  //删除元素

$li.appendTo("ul");  //重新追加此元素,发现它之前绑定的事件还在,如果使用remove()方法删除元素的话,那么它之前把绑定的事件将失效;

3、empty()方法

严格来讲,empty()方法并不是删除节点,而是清除节点,它能清空元素中的所有后代节点。

$("ul li:eq(1)").empty();//获取第二个<li>元素节点后,清空此元素里的内容,注意是元素里。

运行后的结果为:

jQuery DOM删除节点操作指南

当运行代码后,第二个<li>元素的内容被清空了,只剩下<li>元素默认的符号"."。

以上就是本文所述的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Cookie 小记
Apr 01 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 #Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 #Javascript
javascript验证身份证号
Mar 03 #Javascript
JS烟花背景效果实现方法
Mar 03 #Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 #Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 #Javascript
js+jquery常用知识点汇总
Mar 03 #Javascript
You might like
Php部分常见问题总结
2006/10/09 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
Django 路由控制的实现
2019/07/17 Python
QML使用Python的函数过程解析
2019/09/26 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
食品安全承诺书
2014/05/22 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
水电维修专业推荐信
2014/09/06 职场文书
费用申请报告范文
2015/05/15 职场文书
地道战观后感500字
2015/06/04 职场文书
求职自我评价参考范文
2019/05/16 职场文书