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>元素默认的符号"."。

以上就是本文所述的全部内容了,希望大家能够喜欢。

(0)

相关推荐

  • 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

随机推荐