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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
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
PHP截取中文字符串的问题
2006/07/12 PHP
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
python 字符串常用方法汇总详解
2019/09/16 Python
Python算法中的时间复杂度问题
2019/11/19 Python
Python字节单位转换实例
2019/12/05 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
日语系毕业生推荐信
2013/11/11 职场文书
绿色学校实施方案
2014/03/31 职场文书
实习指导老师评语
2014/04/26 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
我的中国梦主题班会
2015/08/14 职场文书