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 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
javascript 实现map集合
Apr 03 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 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
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
Vue实现简易计算器
2020/02/25 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
python实现web方式logview的方法
2015/08/10 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
python实现K最近邻算法
2018/01/29 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
北大青鸟学生求职信
2013/09/24 职场文书
生物技术专业毕业生求职信范文
2013/12/14 职场文书
大三学生入党思想汇报
2014/01/02 职场文书
知识竞赛主持词
2014/03/26 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
冬季施工防火方案
2014/05/17 职场文书
横幅标语大全
2014/06/17 职场文书
辩护词格式
2015/05/22 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js