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 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 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删除数组中重复元素的方法
2015/12/22 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
python操作sqlite的CRUD实例分析
2015/05/08 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
python简单实现计算过期时间的方法
2015/06/09 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Python语言快速上手学习方法
2018/12/14 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
精通CAD能手自荐书
2014/01/31 职场文书
股份合作协议书范本
2014/04/14 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
校友会致辞
2015/07/30 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题