jQuery中删除方法empty(),remove()和detach()的区别
empty():清空匹配的元素集合中所有的子节点,自身节点和事件都未被删除。
remove():这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。
detach():这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。
举个栗子:
<body>
<div id="div1" style="height: 100px;width: 300px;border: 1px solid black;background: yellow;">
this is some text in the div.
<p id="panel">pppp</p>
<p>two ppppppp</p>
</div>
<button>删除div元素</button>
</body>
empty():清空节点,保留自身。
$('button').click(function () {
$('#div1').empty();
})
效果:

remove():删除被选元素极其子元素。
$('button').click(function () {
$('#div1').remove();
})
效果:

detach()方法同detach,但是可以保留jquery相关的数据和绑定事件。
$('#panel').hover(function () {
$(this).css('color','red');
})
var deleteP = $('#panel').detach();
$('#div1').append(deleteP);
效果:

如果用remove()不会保留数据和绑定事件。
$('#panel').hover(function () {
$(this).css('color','red');
})
var deleteP = $('#panel').remove();
$('#div1').append(deleteP);
效果:p不会改变颜色,hover不起作用

关于追加之后p跑到下边问题:
首先,你通过$("p").detach()把上面的p给“删除/隐藏”了,实际上p还是存在的,只是你看不到了。
然后你又用
$("body").append($("p").detach());
向body中添加元素,这个元素其实还是p。
不是p跑到下面,而是你把p给“复制”了一个并添加到最下面,原来的p给隐藏了。
提示:如需移除元素,但保留数据和事件,请使用 detach() 方法。
提示:如需移除元素及它的数据和事件,请使用 remove() 方法。
提示:如只需从被选元素移除内容,请使用 empty() 方法。
jQuery中删除方法empty(),remove()和detach()的区别的更多相关文章
- jQuery 元素移除empty() remove()与detach()的区别?
@1.empty() 删除匹配元素集合中所有的后代字节点元素: <p>hello<span>world</span></p> $("p&quo ...
- 探索jquery方法中empty,remove与detach的区别
最近一直疑惑此三种方法的具体区别在于何处,随即想弄明白其具体的区别,看了一些说明,也依照官方文档,终于把这三个方法弄明白了,果然功夫不负有心人,继续努力. 上正文,先简单介绍下这三种方法 .empty ...
- 转载JQuery 中empty, remove 和 detach的区别
转载 http://www.cnblogs.com/lisongy/p/4109420.html .empty() 描述: 从DOM中移除集合中匹配元素的所有子节点. 这个方法不接受任何参数. 这个 ...
- jQuery中删除节点方法remove()、detach()、empty()分析
jQuery中提供了三种删除节点的方法:remove().detach().empty(),本文详细分析这三种方法. 最容易区分的是empty(),该方法严格上属于“清空节点”,即删除其子节点,自身并 ...
- JavaScript 中 empty、remove 和 detach的区别
内容 empty.remove 和 detach的区别 jQuery 操作 DOM 之删除节点 方法名 元素所绑定的事件及数据是否也被移除 作用 $(selector).empty() 是 从被选元素 ...
- Jquery中删除元素方法
empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...
- jquery 中remove()与detach()的区别
remove()与detach()方法都是从dom中删除所有的元素 两者的共同之处在于都不会把匹配的元素从jQuery对象中删除. 不同之处在于用remove()删除的元素,除了元素被保留,其他的在这 ...
- jQuery的remove和detach的区别
1.remove([expr]) 概述:从DOM中删除所有匹配的元素. 这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素.但除了这个元素本身得以保留之外,其他的 ...
- 关于Jquery中ajax方法data参数用法的总结
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
随机推荐
- 17.3 删除没用的project
1.删除某一个或多个无用的project(历史project) 用十六进制编辑器打开"C:\Users\Baymax\Documents\Source Insight 4.0\Project ...
- python 数字以及字符串(方法总结,有的可能理解错误)
数字类型(int): 在python 2中,数字类型可以分为整形,长整形,浮点型,以及复数.在python3中都是整形和长整形都称之为整形,且python3中没有限制. 1.int方法使用,用于转换字 ...
- 【Oracle】ORA-14400: 插入的分区关键字未映射到任何分区
问题描述: 工作中使用kettle将原始库中的数据抽取到标准库中,在抽取过程中报错:[ORA-14400: 插入的分区关键字未映射到任何分区]/[ORA-14400: inserted partiti ...
- 一些关于three.js的摘抄笔记
加载多个geometry的方式: (可以利用three.js自带convert_obj_three.py文件将obj文件转换成json文件) function loadModel() { loader ...
- 第一节 Python基础之数据类型(整型,布尔值,字符串)
数据类型是每一种语言的基础,就比如说一支笔,它的墨有可能是红色,有可能是黑色,也有可能是黄色等等,这不同的颜色就会被人用在不同的场景.Python中的数据类型也是一样,比如说我们要描述一个人的年龄:小 ...
- 【译】Optaplanner开发手册本地化: (0) - 前言及概念
在此之前,针对APS写了一些理论性的文章:而对于Optaplanner也写了一些介绍性质,几少量入门级的帮助初学者走近Optaplanner.在此以后,老农将会按照Optaplanner官方的用户手册 ...
- Restful OData Protocol
Web服务有两种实现方式: 一是SOAP协议方式 二是REST方式. SOAP是一套完整的实现Web服务的解决方案.这里有必要先简单了解SOAP方式的Web服务,然后对比SOAP方式,我们会发现RES ...
- LeetCode——295. Find Median from Data Stream
一.题目链接: https://leetcode.com/problems/find-median-from-data-stream 二.题目大意: 给定一段数据流,要求求出数据流中的中位数,其中数据 ...
- UHF RFID,高频RFID开发参考资料
ISO18000-6C电子标签百科 http://baike.baidu.com/item/ISO18000-6C%E7%94%B5%E5%AD%90%E6%A0%87%E7%AD%BE/80500 ...
- 知识点:tuple 元素真的不可变吗
tuple 元素真的不可变吗 有一种有序列表叫元组:tuple. tuple和list非常类似,但是tuple一旦初始化就不能修改,比如同样是列出单位或同学的名字: >>> clas ...