JQuery删除DOM节点的方法


Posted in Javascript onJune 11, 2015

本文实例讲述了JQuery删除DOM节点的方法。分享给大家供大家参考。具体分析如下:

如果文档中某一个元素多余,那么应将其删除。JQuery提供了两种删除节点的方法,即remove()和empty()。

HTML DOM结构如下:

<p class="nm_p" title="欢迎访问三水点靠木" >欢迎访问三水点靠木</p>
<ul class="nm_ul">
  <li title='PHP编程'>简单易懂的PHP编程</li>
  <li title='C编程'>简单易懂的C编程</li>
  <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
  <li title='JQuery'>简单易懂的JQuery编程</li>
</ul>

remove()方法

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

例如删除<ul>节点中的第2个<li>元素节点,JQuery代码如下:

$(".nm_ul li:eq(1)").remove();
// 获取第二个<li>元素节点后,将它从网页中删除

运行代码后效果将删掉第二个节点。

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

var $li = $("nm_ul li:eq(1)").remove();
// 获取第二个<li>元素节点后,将它从网页中删除。 
$li.appendTo("nm_ul");
// 把刚才删除的又重新添加到<ul>元素里 
//所以,删除只是从网页中删除,在jQuery对象中,这个元素还是存在的,我们可以重新获取它

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

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

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

// 把<li>元素中属性title不等于"菠萝"的<li>元素删除
$("nm_ul li").remove("li[title!=JQuery]");

empty()方法

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

$("nm_ul li:eq(1)").empty();
// 找到第二个<li>元素节点后,清空此元素里的内容

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

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
js实现加载更多功能实例
Oct 27 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
HTML元素拖拽功能实现的完整实例
Dec 04 Javascript
JQuery插入DOM节点的方法
Jun 11 #Javascript
JQuery创建DOM节点的方法
Jun 11 #Javascript
JQuery查找DOM节点的方法
Jun 11 #Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 #Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 #Javascript
jquery序列化方法实例分析
Jun 10 #Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 #Javascript
You might like
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python读取stdin方法实例
2019/05/24 Python
如何基于python生成list的所有的子集
2019/11/11 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
税务会计岗位职责
2014/02/18 职场文书
求职信模板
2014/05/23 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python