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中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
深入理解javascript变量声明
Nov 20 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
详解js中==与===的区别
Jan 08 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 Javascript
如何用JS实现简单的数据监听
May 06 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 图像函数大举例(非原创)
2009/06/20 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
在JS中如何调用JSP中的变量
2014/01/22 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
jquery map方法使用示例
2014/04/23 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
使用Python脚本操作MongoDB的教程
2015/04/16 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
校园新闻广播稿
2014/01/10 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
人事局接收函
2015/01/31 职场文书
地道战观后感300字
2015/06/04 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫
Python中的 No Module named ***问题及解决
2022/07/23 Python