jQuery--删除节点（remove()、detach()、empty()）详解

删除节点

在jQuery中提供了remove()和detach()方法，用于删除元素节点；empty()方法用于清空当前元素中的内容，而元素的标签部分仍被保留。

1. remove()方法：
remove()方法用于删除所匹配的元素，包括该元素的文本节点和子节点。该方法返回一个jQuery对象或数组，其中包含被删除元素的基本内容，但不包含所绑定的事件和附加数据等信息。remove()方法的语法格式如下：

var jQueryObject = $(selector).remove();
//$(selector)表示需要被删除的元素

2. detach()方法：
detach()方法用于删除所匹配的元素，包括该元素的文本节点和子节点。该方法将返回一个jQuery对象或数组，其中包含被删除元素的基本内容、绑定事件以及附加数据等信息。detach()方法的语法格式如下：

var jQueryObject = $(selector).detach();
//$(selector)表示需要被删除的元素

3. empty()方法：
empty()方法用于清空元素的内容（包括所有文本和子节点），但不删除该元素，其语法格式如下：

$(selector).empty()
//$(selector)表示要被清空的元素

示例：

<!doctype html>
<html>
<head><meta charset="utf-8"><title>删除节点-jQuery</title><script type="text/javascript" src="js/jquery-1.x.js"></script><style type="text/css">img{height:250px;width:240px;}table{border:0px; text-align:center;}table td{width:240px;}</style>
</head>
<body><table  border="1"><tr><td id="firstCell"><img src="data:images/clothe1.jpg" /></td><td id="secondCell"><img src="data:images/clothe2.jpg" /></td><td id="thirdCell"><img src="data:images/clothe3.jpg" /></td></tr><tr><td><input type="button" value="remove" id="removeBtn"/><input type="button" value="recovery" id="recoveryRemoveBtn"/></td><td><input type="button" value="detach" id="detachBtn"/><input type="button" value="recovery" id="recoveryDetachBtn"/></td><td><input type="button" value="empty" id="emptyBtn"/></td></tr></table><script type="text/javascript">$(function (e) {var firstImage;var secondImage;//为每幅图像附加数据$("img:first").data("msg", "皮草大卖场-漫步时尚广场");$("img:eq(1)").data("msg", "电子产品专卖-漫步时尚广场");$("img:last").data("msg", "西装个人定制-漫步时尚广场");//为图像绑定click事件$("img").click(function(){alert($(this).data("msg"));});//removeBtn按钮绑定click事件$("#removeBtn").click(function(){if(($("#firstCell img").length)>0){firstImage=$("#firstCell img").remove();}});//恢复removeBtn按钮删除的图像$("#recoveryRemoveBtn").click(function(){$("#firstCell").append(firstImage);});//detachBtn按钮绑定click事件$("#detachBtn").click(function(){if(($("#secondCell img").length)>0){secondImage=$("#secondCell img").detach();}});//恢复detachBtn按钮删除的图像$("#recoveryDetachBtn").click(function(){$("#secondCell").append(secondImage);});//emptyBtn按钮绑定click事件$("#emptyBtn").click(function(){$("#thirdCell").empty();});});</script>
</body>
</html>

第一张图：删除后恢复的图像不再具有附加数据和click事件
第二张图：删除后恢复的图像与原来一致
第三张图：删除后单元格本身并没有消失

jQuery--删除节点（remove()、detach()、empty()）详解相关推荐

jQuery删除元素---remove()与empty()
jQuery删除元素-remove()与empty() remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素举例:remove() <script> ...
html用js添加兄弟节点,jquery 删除节点添加节点找兄弟节点的简单实现
$().empty(); //该方法会删除当前节点下的所有子节点,请注意当前节点不会被删除 $().remove(); //该方法会删除当前节点下的所有子节点,请注意当前节点会被删除 $(). ...
前端基础 -JQuery 删除节点
JQuery 删除节点删除节点有两个关键字:empty 清空.remove:移除案例: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 T ...
echart的关系图高亮_echarts鼠标覆盖高亮显示节点及关系名称详解
js代码,使用了jquery和echarts.js,用的是源代码那版,因为待会要进源代码里修改-- 其实js代码和echart官网demo的代码完全没区别-- 普通的力图设置,只要加上focusNod ...
python 列表 remove()函数使用详解
「作者主页」:士别三日wyx remove函数使用详解 1. 基本使用 2. 删除普通类型元素 3. 删除对象类型元素 4. 一次只删一个元素 1. 基本使用 remove() 函数可以删除列表中的指 ...
java迭代器删除元素_java迭代器中删除元素的实例操作详解
java迭代器中删除元素的实例操作详解 2021-01-21 16:40:08 我们知道通过Iterator,可以对集合中的元素进行遍历.那么在其中遇到我们不需要的元素时,可不可以在遍历的时候顺便给删 ...
Java数据结构与算法-SingleLinkedList单向链表插入，删除，查找，修改详解及代码
SingleLinkedList单向链表插入,删除,查找,修改详解及代码单向链表学习目标 1. 链表的介绍 2. 单向链表的存储特点以及原理 3. 基本操作:插入,删除等 4. 单向链表应用场景举例 ...
jQuery中getJSON跨域原理详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解前几天我再开发一个叫河蟹工 ...
SVN删除文件及其恢复问题详解
SVN删除文件及其恢复问题详解转自:http://developer.51cto.com/art/201006/203161.htm 本节我们一起来学习一下SVN删除文件及其恢复问题,和大家分享一下 ...
Word怎么删除空白页操作方法 Word删除空白页的办法详解oldtimeblog
word怎么删除空白页操作方法 Word删除空白页的办法详解相信大家对Word办公软件很是熟悉吧,因为我们天天都有在使用它.我们平时在使用Word写文档时,经常遇到在编辑处理完文档后会发现Word中 ...

jQuery--删除节点（remove()、detach()、empty()）详解

删除节点

jQuery--删除节点（remove()、detach()、empty()）详解相关推荐

最新文章

热门文章