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 18 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
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+JS+rsa数据加密传输实现代码
2011/03/23 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
javascript 得到变量类型的函数
2010/05/19 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
python list转dict示例分享
2014/01/28 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
工商管理专业学生的自我评价
2013/10/01 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
工伤调解协议书
2016/03/21 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP