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全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
js倒计时小程序
Nov 05 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
详解js创建对象的几种方式和对象方法
Mar 01 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
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
python字典基本操作实例分析
2015/07/11 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python实现三次样条插值
2018/12/17 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
.net面试题
2016/09/17 面试题
生日宴会答谢词
2014/01/09 职场文书
学生出入校管理制度
2014/01/16 职场文书
大型车展策划方案
2014/02/01 职场文书
运动会稿件100字
2014/02/21 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
外国人来华邀请函
2015/01/31 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
2015年推普周活动方案
2015/05/06 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
论语读书笔记
2015/06/26 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书