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自动判断浏览器分辨率的代码
Jan 28 Javascript
JMenuTab简单使用说明
Mar 13 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
json.stringify()与json.parse()的区别以及用处
Jan 25 Javascript
详解Vue3使用axios的配置教程
Apr 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 smarty模板引擎的6个小技巧
2014/04/24 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
python实现爬取图书封面
2018/07/05 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
python实现与redis交互操作详解
2020/04/21 Python
python如何快速生成时间戳
2020/07/21 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python