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 相关文章推荐
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
javascript的几种写法总结
Sep 30 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
JavaScript实现简单日历效果
Sep 11 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 批量替换html标签的实例代码
2013/11/26 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python目录与文件名操作例子
2016/08/28 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
详解python while 函数及while和for的区别
2018/09/07 Python
3分钟学会一个Python小技巧
2018/11/23 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
电大自我鉴定
2013/10/27 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
六年级情感作文之500字
2019/10/23 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers