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 相关文章推荐
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
Vue项目中ESlint规范示例代码
Jul 04 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 魔术函数使用说明
2010/02/21 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
小学运动会班级口号
2014/06/09 职场文书
国庆宣传标语
2014/06/30 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
党支部意见范文
2015/06/02 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA