jQuery DOM删除节点操作指南
下面示例可能用到如下HTML代码:
<ul>
<li title="t1">苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>葡萄</li>
<li>草莓</li>
</ul>
1、remove()方法:
作用:从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素。
例如,删除上图中<ul>节点中的第二个<li>元素节点,jQuery代码如下:
$(document).ready(function() {
$("ul li:eq(1)").remove();
});
当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。下面的jQuery代码说明元素用remove()方法删除后,还是可以继续使用的。
var $li=$("ul li:eq(1)").remove();
$li.appendTo("ul"); //把删除的节点又重新添加到<ul>元素里
可以直接使用appendTo()方法的特性来简化以上代码:
$("ul li:eq(1)").appendTo("ul");//appendTo()方法也可以用来移动元素,移动元素时首先从文档上删除此元素,然后将该元素插入到文档中的指定节点。
另外remove()方法也可以通过传递参数来选择性地删除元素:
$("ul li").remove("li[title='t1']");
2、detach()方法:
detach()和remove()一样,也是从DOM中去掉所有匹配的元素。但需要注意的是,这个方法不会匹配的元素从jQuery对象删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附件的数据等都会保留下来。
通过下面的例子,可以知道它与remove()方法的区别:
$("ul li").click(function(){
alert($(this).html());
})
var $li=$("ul li:eq(1)").detach(); //删除元素
$li.appendTo("ul"); //重新追加此元素,发现它之前绑定的事件还在,如果使用remove()方法删除元素的话,那么它之前把绑定的事件将失效;
3、empty()方法
严格来讲,empty()方法并不是删除节点,而是清除节点,它能清空元素中的所有后代节点。
$("ul li:eq(1)").empty();//获取第二个<li>元素节点后,清空此元素里的内容,注意是元素里。
运行后的结果为:
当运行代码后,第二个<li>元素的内容被清空了,只剩下<li>元素默认的符号"."。
以上就是本文所述的全部内容了,希望大家能够喜欢。
相关推荐
-
jquery之empty()与remove()区别说明
1.empty()是只移除了 指定元素中的所有子节点,拿$("p").empty()来说,他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p></p>,仍保留其在dom中所占的位置. 2.remove([expr])则是把其从dom中删除,而不会保留其所占的位置. 例:<p>Hello</p>World<p>welcome</p> 执行$("p").empt
-
jQuery中DOM节点删除之empty与remove
前言 最近刚学了新知识,虽然是一个小知识点,但还是忍不住想和大家分享.本文的内容主要针对的是初学者,如果大家有什么意见或者问题都可以留言交流的,下面来看看详细的介绍吧. .empty()是指对该节点后代的删除,结果是清空该节点(该节点里面已无元素). .remove()是指删除该节点,结果是删除该节点(该节点及其后代元素都将不存在). 下面放代码来说明. <!DOCTYPE html> <html> <head lang="en"> <meta
-
基于DOM节点删除之empty和remove的区别(详解)
要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题,这里我们开仔细了解下empty和remove方法 empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点. 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本.因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点.请看下面的HTML: <div class="hello"><p>这是p标签</p></
-
JQuery删除DOM节点的方法
本文实例讲述了JQuery删除DOM节点的方法.分享给大家供大家参考.具体分析如下: 如果文档中某一个元素多余,那么应将其删除.JQuery提供了两种删除节点的方法,即remove()和empty(). HTML DOM结构如下: <p class="nm_p" title="欢迎访问我们" >欢迎访问我们</p> <ul class="nm_ul"> <li title='PHP编程'>简单易懂的
-
jQuery的DOM操作之删除节点示例
如果文档中某一个元素多余,那么应将其删除.jQuery提供了两种删除节点的方法,remove()方法和empty()方法. 1. remove(): <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content=&quo
-
jQuery中DOM节点的删除方法总结(超全面)
前言 相信大家都知道,要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题.下面本文就进行一个详细的介绍,感兴趣的朋友们一起来看看吧. 一.empty empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点. 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本.因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点.如果我们通过empty方法移除里面div的所有元素,它只是清空内部的html代码,但是标记仍
-
jQuery DOM删除节点操作指南
下面示例可能用到如下HTML代码: 复制代码 代码如下: <ul> <li title="t1">苹果</li> <li>香蕉</li> <li>橘子</li> <li>葡萄</li> <li>草莓</li> </ul> 1.remove()方法: 作用:从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛
-
jQuery DOM插入节点操作指南
方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码:<p>我想说:</p> jQuery代码: $("p").append("<b>你好</b>"); 结果: <p>我想说:<b>你好</b></p> appendTo() 将所有匹配的元素追加到指定的元素中 .实际上,使用该方法是颠倒了常规 的$(A).append(B)的操作,是将A追加到B
-
JS实现DOM删除节点操作示例
本文实例讲述了JS实现DOM删除节点操作.分享给大家供大家参考,具体如下: 一 介绍 删除节点通过使用removeChild()方法来实现. removeChild()方法用来删除一个子节点. obj. removeChild(oldChild) oldChild:表示需要删除的节点. 二 应用 删除节点,本示例将通过DOM对象的removeChild()方法,动态删除页面中所选中的文本. 三 代码 <!DOCTYPE html> <html> <head> <t
-
jQuery删除节点的三个方法即remove()detach()和empty()
jQuery提供了三种删除节点的方法,即remove(),detach()和empty(). 测试所用HTML代码: 复制代码 代码如下: <p title="选择你最喜欢的水果?">你最喜欢的水果是?</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝"
-
jQuery添加删除DOM元素方法详解
本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML. 例如:document,getElementsByTagName("form");//使用DOM
-
jQuery实现删除li节点的方法
废话不多说了,直接给大家贴代码了,具体代码如下所示: <html> <head> <meta charset="utf-8"> <title></title> <style> ul { list-style: none; } li { line-height: 25px; margin-top: 3px; } li:hover { background-color: #ddd; } li.hover { backg
-
jQuery DOM节点的遍历方法小结
本文介绍了jQuery DOM节点的遍历方法小结,分享给大家,也给自己留个笔记 children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈,这里可以理解为就是父亲-儿子的关系) 节点查找关系 <div class="div"> <ul class="son"> <
-
jQuery删除节点用法示例(remove方法)
本文实例讲述了jQuery删除节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="text/
-
JQuery给select添加/删除节点的实现代码
jQuery获取Select选择的Text和Value: var checkText=jQuery("#select_id").find("option:selected").text(); //获取Select选择的Text var checkValue=jQuery("#select_id").val(); //获取Select选择的option Value var checkIndex=jQuery("#select_id &qu
随机推荐
- CentOS 7中利用yum安装Nginx的方法教程
- Python二分查找详解
- 解析Oracle 8i/9i的计划稳定性
- WIN7下ORACLE10g服务端和客户端的安装图文教程
- js点击按钮实现带遮罩层的弹出视频效果
- Windows XP系统 SP2防火墻概述
- iOS微信第三方登录实现
- Python实现的排列组合计算操作示例
- js实现简单的选项卡效果
- 解析php框架codeigniter中如何使用框架的session
- PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
- Android自定义view绘制圆环占比动画
- 服务器数据库编码格式问题解决方案
- Android开发中的MVC设计模式浅析
- linux中常用脚本和函数分享
- matplotlib绘制符合论文要求的图片实例(必看篇)
- react路由配置方式详解
- jQuery事件委托之Safari
- jquery实现pager控件示例
- node.js中的fs.chownSync方法使用说明