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 相关文章推荐
JavaScript Prototype对象
Jan 07 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
webpack多页面开发实践
Dec 18 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
Vue的props父传子的示例代码
May 20 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
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和ACCESS写聊天室(八)
2006/10/09 PHP
PHP开发框架总结收藏
2008/04/24 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
原生js实现分页效果
2020/09/23 Javascript
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
python使用selenium实现批量文件下载
2019/03/11 Python
python提取log文件内容并画出图表
2019/07/08 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
Django设置Postgresql的操作
2020/05/14 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
管理信息系学生的自我评价
2014/01/11 职场文书
助残日活动总结
2014/08/27 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
法人授权委托书范本
2014/09/17 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
英雄儿女观后感
2015/06/09 职场文书
python unittest单元测试的步骤分析
2021/08/02 Python