删除节点

JQuery提供了两种删除节点的方法：remove()、detach()

一种清除节点后代元素的方法：empty()

remove():remove()方法从DOM 中删除所有匹配的元素，传入的参数用于根据jQuery 表达式来筛选元素。
当某个节点用remove（）方法删除后，该节点所包含的所有后代节点将同时被删除。
这个方法的返回值是一个指向己被删除的节点的引用，因此可以在以后再使用这些元素。
$("p").remove();

detach():detach() 方法移除被选元素，包括所有文本和子节点。
   这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。
   detach() 会保留所有绑定的事件、附加的数据
   $("p").detach();

empty():empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点

remove()和detach()方法的比较：

二者的共同点：

都会将匹配到的元素完全删除

都不会将匹配的元素从jQuery对象中删除

二者的不同点：

remove()会将匹配元素所绑定的事件一起移除，即使匹配元素的jQuery对象重新添加到界面，之前的事件也不会再起作用

detach()则不会移除绑定在匹配元素上的事件，将匹配元素的jQuery对象重新添加到界面，该元素绑定的事件及附加元素依然有效

案例源码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){// 待删除的p标签的jquery对象var a = $("p");  // 给p标签添加点击事件$("p").click(function(){alert("remove()和detach()的区别");})// detach()删除节点$("button:first").click(function(){$("p").detach();})// remove()删除节点$("button:eq(1)").click(function(){$("p").remove();})// empty()清除后代节点$("button:eq(2)").click(function(){$("p").empty();})// 通过jQuery对象重新将p标签添加到body里$("button:eq(3)").click(function(){$("body").prepend(a);})});
</script>
</head><body>
<p>This is a paragraph.</p><button>删除 p 元素(detch()方法删除)</button>
<button>删除 p 元素(remove()方法删除)</button><br />
<button>清除p 标签内的内容(empty()方法清除)</button><br />
<button>重新添加p元素(通过jquery对象添加)</button>
</body>
</html>

结果展示：

触发p标签的点击事件：

remove()和detach()作用后：

可以看到，内容已经删除掉了，通过看右边的代码，body内的<p>标签也已经删除了

detach()删除内容后，重新添加，p标签的点击事件依然有效

remove()删除内容后，重新添加，p标签的点击事件失效

注意！！！：

运行案例代码时，remove()删除元素重新添加，然后detach()删除元素再添加

此时，<p>标签没有点击事件，remove()已将其移除

empty()作用后：

页面上内容已经消失，看起来跟remove()还有detach()方法很类似，

但是通过看代码可以发现<p>标签还是存在的，只是内容清除了，所以empty()只是删除后代节点

JQueryDOM之删除节点相关推荐

solr-cloud 集群动态增加、删除节点
本次讲述动态增加节点基于上一章集群搭建的基础上来讲:https://blog.csdn.net/u013490585/article/details/86494476 上一章的例子中用了3台zk,4台 ...
c语言结点初始化,C语言双向链表简单实现及图示（初始化/插入节点/删除节点）...
-------------------------------------------- 双向链表 - - - - - - - - - - - - - - - - - - - - - - - - - ...
双链表（删除节点操作）
在双链表中删除第i个节点算法如下: 首先要会: 双链表的存储结构定义: typedef struct DLinkList{int data;DLinkList * prior;DLinkList * ...
Oracle RAC删除节点
在前面的两篇文章中,演示了如何向rac环境中添加一个新的节点,集群除了兼备负载均衡,故障转移的特点外,更应该有易于扩展和收缩的属性:本文中讲演示如何将之前添加的节点3彻底删除,使用的数据库版本和操作系 ...
Oracle RAC 添加删除节点
百度搜索,会很多文章关于如何添加删除节点的,而且这个操作也没有什么很多的技术含量,但是自己测试过,记录一下,以备后续查询,同时也希望能给需要的朋友一些帮助. 环境介绍环境为两个节点RAC:racno ...
Linux循环链表删除节点,删除循环单链表开头元素
要删除循环单链表中的开头节点,需要进行一些指针调整. 在开头有三种从循环单链表中删除节点的方案有以下几种. 情况1 :(链表为空) 如果链表为空,则条件head == NULL将变为true,在这种情 ...
双向链表删除节点时间复杂度_删除链表的节点（剑指offer第十七题）
删除链表的节点题目:给定单向链表的头指针和一个要删除的节点的值,定义一个函数删除该节点.返回删除后的链表的头节点. 注意:此题对比原题有改动示例 1: 输入: head = [4,5,1,9], ...
节点操作-创建并添加删除节点替换克隆节点
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
DevExpress的TreeList实现节点上添加自定义右键菜单并实现删除节点功能
场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...

JQueryDOM之删除节点

删除节点

remove()和detach()方法的比较：

案例源码：

结果展示：

JQueryDOM之删除节点相关推荐

最新文章

热门文章