DOM节点删除之保留数据的删除操作detach()
2017-03-13 09:49
330 查看
detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素,但保留这个元素的内存模型对象。
来看看jquery官方文档的解释:
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。 $("div").detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。
当然这里要特别注意,detach方法是JQuery特有的,所以它只能处理通过JQuery的方法绑定的事件或者数据
参考右边的代码区域,通过 $("p").detach()把所有的P元素删除后,再通过append把删除的p元素放到页面上,通过点击文字,可以证明事件没有丢失
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style type="text/css">
p {
color: red;
}
</style>
</head>
<body>
<p>P元素1,默认给绑定一个点击事件</p>
<p>P元素2,默认给绑定一个点击事件</p>
<button id="bt1">点击删除 p 元素</button>
<button id="bt2">点击移动 p 元素</button>
<script type="text/javascript">
$('p').click(function(e) {
alert(e.target.innerHTML)
})
var p;
$("#bt1").click(function() {
if (!$("p").length) return; //去重
//通过detach方法删除元素
//只是页面不可见,但是这个节点还是保存在内存中
//数据与事件都不会丢失
p = $("p").detach()
});
$("#bt2").click(function() {
//把p元素在添加到页面中
//事件还是存在
$("body").append(p);
});
</script>
</body>
</html>
相关文章推荐
- DOM节点删除之保留数据的删除操作detach()
- DOM节点删除之保留数据的删除操作detach()
- DOM节点删除之保留数据的删除操作detach()
- javascript中dom节点操作(创建节点、增加节点、删除节点、克隆节点)
- Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
- 删除重复数据只保留一条的操作
- DOM(一)-18-(节点操作-删除节点)
- 链表循环保留M个节点 然后删除N个节点 重复操作到链表尾部
- html dom节点操作(获取/修改/添加或删除)
- 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)
- 【1138】数据结构上机测试2-1:单链表操作A(顺序建表+删除节点)(SDUT)
- jQuery之dom操作(查询、创建、插入、删除、复制节点)
- 3.2.4: jQuery的DOM操作之删除节点
- 系统学习jQuery.核心知识.局部.jQuery操作.DOM操作.删除节点
- jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
- javascript操作dom 建立 增加 删除 克隆 访问节点
- js操作DOM--添加、删除节点
- jQuery的DOM操作之删除节点示例
- js之DOM操作(删除节点removeChild())
- jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作