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判断office版本示例
Apr 11 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
Vue动态获取width的方法
Aug 22 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
使用uni-app开发微信小程序的实现
Dec 13 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 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 多进程 解决难题
2009/06/22 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
一篇不错的Python入门教程
2007/02/08 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
python中sys.argv函数精简概括
2018/07/08 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
程序员岗位职责
2013/11/11 职场文书
工程部经理岗位职责
2013/12/08 职场文书
学年自我鉴定
2014/01/16 职场文书
一年级班主任寄语
2014/01/19 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
天那边观后感
2015/06/09 职场文书
五年级语文教学反思
2016/03/03 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang