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 相关文章推荐
IE中createElement需要注意的一个问题
Jul 13 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 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
PHP排序算法的复习和总结
2012/02/15 PHP
php调用c接口无错版介绍
2014/03/11 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
html读出文本文件内容
2007/01/22 Javascript
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
python将文本转换成图片输出的方法
2015/04/28 Python
用Python解决x的n次方问题
2019/02/08 Python
python通过http下载文件的方法详解
2019/07/26 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
python如何从键盘获取输入实例
2020/06/18 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
银行类自荐信
2014/02/04 职场文书
公立医院改革实施方案
2014/03/14 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
司法助理专业自荐书
2014/06/13 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
辞职信格式模板
2015/02/27 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
Python Pandas解析读写 CSV 文件
2022/04/11 Python
Python 视频画质增强
2022/04/28 Python