jQuery的DOM操作之删除节点示例


Posted in Javascript onJanuary 03, 2014

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

1. remove():

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<script src="jQuery/jquery-1.10.2.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("ul li:eq(1)").remove(); 
}); 
</script> 
</head> 
<body> 
<p title="what kind of fruit do you like best?">你最喜欢的水果是?</p> 
<ul> 
<li title="apple">苹果</li> 
<li title="orange">橘子</li> 
<li title="banana">香蕉</li> 
</ul> 
</body> 
</html>

jQuery的DOM操作之删除节点示例 

当某个节点用remove方法删除后,该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用。

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

<script type="text/javascript"> 
$(document).ready(function(){ 
$("ul li").remove("li[title!=apple]"); 
}); 
</script>

jQuery的DOM操作之删除节点示例

2. empty():

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

<script type="text/javascript"> 
$(document).ready(function(){ 
$("ul li:eq(1)").empty(); 
}); 
</script>

jQuery的DOM操作之删除节点示例 

此时查看页面源码:

jQuery的DOM操作之删除节点示例

Javascript 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
JavaScript与DropDownList 区别分析
Jan 01 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 #Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 #Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 #Javascript
IE6下拉框图层问题探讨及解决
Jan 03 #Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 #Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 #Javascript
使用js判断控件是否获得焦点
Jan 03 #Javascript
You might like
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
php获取微信openid方法总结
2019/10/10 PHP
javascript开发中因空格引发的错误
2010/11/08 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
Python常用模块用法分析
2014/09/08 Python
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
python os用法总结
2018/06/08 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
优秀小学生家长评语
2014/01/30 职场文书
承诺书格式
2014/06/03 职场文书
淘宝店策划方案
2014/06/07 职场文书
股东授权委托书
2014/10/15 职场文书
2014年居委会工作总结
2014/12/09 职场文书
2015年保送生自荐信
2015/03/24 职场文书
2015年采购部工作总结
2015/04/23 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python