jQuery DOM删除节点操作指南

2024-10-20 09:27:01

下面示例可能用到如下HTML代码：

代码如下:

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中DOM节点的删除方法总结（超全面）

前言相信大家都知道,要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题.下面本文就进行一个详细的介绍,感兴趣的朋友们一起来看看吧. 一.empty empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了指定元素中的所有子节点. 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本.因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点.如果我们通过empty方法移除里面div的所有元素,它只是清空内部的html代码,但是标记仍
JQuery删除DOM节点的方法

本文实例讲述了JQuery删除DOM节点的方法.分享给大家供大家参考.具体分析如下: 如果文档中某一个元素多余,那么应将其删除.JQuery提供了两种删除节点的方法,即remove()和empty(). HTML DOM结构如下: 欢迎访问我们 <ul class="nm_ul"> <li title='PHP编程'>简单易懂的
jquery之empty()与remove()区别说明

1.empty()是只移除了指定元素中的所有子节点,拿$("p").empty()来说,他只是把dsfsd中的文本给移除了,而留下了,仍保留其在dom中所占的位置. 2.remove([expr])则是把其从dom中删除,而不会保留其所占的位置. 例:HelloWorldwelcome 执行$("p").empt
jQuery中DOM节点删除之empty与remove

前言最近刚学了新知识,虽然是一个小知识点,但还是忍不住想和大家分享.本文的内容主要针对的是初学者,如果大家有什么意见或者问题都可以留言交流的,下面来看看详细的介绍吧. .empty()是指对该节点后代的删除,结果是清空该节点(该节点里面已无元素). .remove()是指删除该节点,结果是删除该节点(该节点及其后代元素都将不存在). 下面放代码来说明. <!DOCTYPE html> <html> <head lang="en"> <meta
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
基于DOM节点删除之empty和remove的区别(详解)

要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题,这里我们开仔细了解下empty和remove方法 empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了指定元素中的所有子节点. 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本.因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点.请看下面的HTML: <div class="hello">这是p标签</
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代码:我想说: jQuery代码: $("p").append("你好"); 结果: 我想说:你好 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代码: 复制代码代码如下: 你最喜欢的水果是? <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

jQuery DOM删除节点操作指南

相关推荐

随机推荐