jQuery 文档操作 - remove() detach() 方法

最新推荐文章于 2022-05-24 21:50:10 发布

yaogao000

最新推荐文章于 2022-05-24 21:50:10 发布

阅读量841

点赞数

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

jQuery 文档操作 - remove() detach() 方法

转自: http://www.w3school.com.cn/jquery/manipulation_detach.asp

remove() 与detach() 方法都会移除被选元素，包括所有文本和子节点，但这两个方法都可以在将来再使用这些匹配的元素。

detach() 这个方法会保留 jQuery 对象中的匹配的元素，同时 detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。

remove() 方法不会把匹配的元素从 jQuery 对象中删除，但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。

remove() 实例：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").remove());
  });
 $("p").click(function(){
    $(this).animate({fontSize:"+=1px"})
  });
});
</script>
</head>
<body>
<p>在本段落移动之后，试着点击该段落，请注意它保留了 click 事件。</p>
<button>移动 p 元素</button>
</body>
</html>

结果：在移动p元素后，对 p元素进行点击，则 click事件将不起作用

detach() 方法：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").detach());
  });
 $("p").click(function(){
    $(this).animate({fontSize:"+=1px"})
  });
});
</script>
</head>
<body>
<p>在本段落移动之后，试着点击该段落，请注意它保留了 click 事件。</p>
<button>移动 p 元素</button>
</body>
</html>

结果：在移动p元素后，对 p元素进行点击， click事件仍起作用

yaogao000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 文档操作 - remove() detach() 方法

jQuery 文档操作 - remove() detach() 方法转自: http://www.w3school.com.cn/jquery/manipulation_detach.aspremove() 与detach() 方法都会移除被选元素，包括所有文本和子节点，但这两个方法都可以在将来再使用这些匹配的元素。detach() 这个方法会保留 jQuery
复制链接

扫一扫

专栏目录