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 相关文章推荐
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
Node.js实现断点续传
Jun 23 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/08 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
详细分析JavaScript变量类型
2015/07/08 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
python函数不定长参数使用方法解析
2019/12/14 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python实现udp传输图片功能
2020/03/20 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
商场消防安全责任书
2014/07/29 职场文书
家长给老师的感谢信
2015/01/20 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
学术会议通知范文
2015/04/15 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
python读取mnist数据集方法案例详解
2021/09/04 Python