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技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
koa源码中promise的解读
Nov 13 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
JS实现小米轮播图
Sep 21 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
global.php
2006/12/09 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
JsChart组件使用详解
2018/03/04 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
秋季婚礼证婚词
2014/01/11 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
婚内分居协议书范文
2014/11/26 职场文书
张丽莉观后感
2015/06/16 职场文书
高中运动会广播稿
2015/08/19 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers