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 相关文章推荐
测试你的JS的掌握程度的代码
Dec 09 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
angular4中引入echarts的方法示例
Jan 29 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 strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python计算最大优先级队列实例
2013/12/18 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
Python编程之string相关操作实例详解
2017/07/22 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
材料会计岗位职责
2014/03/06 职场文书
师范生求职信
2014/06/14 职场文书
校园安全主题班会
2015/08/12 职场文书
手残删除python之后的补救方法
2021/06/26 Python
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS