jquery中如何移除元素-remove(),empty(),detach()

原创 2016年08月29日 22:09:43

下面就来深拔一下其中的difference。

  • remove()和detach()表示移除的是选择器选中的元素,返回值相同,都是返回被删除的元素。两者不同之处是,前者会同时删除元素关联的data值和事件处理函数,但是后者只移除dom,不会删除data和事件处理函数。后者在我们删除一个元素,然后再把元素插入另一个节点的时候非常有用。
  • empty()表示移除的是选择器的所有子元素,返回的是选择器选中的元素。在如何处理被删除元素的data值和事件处理函数时,其表现和detach()一直,会保留删除元素的data值和事件处理函数。
    综合:
    这里写图片描述

    写了一个例子,可以运行查看相关区别:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <style>
  .selected{
  border:2px solid red;
}
  </style>
  </head>
<body>
<div>

  <div class="test" style="width:100px;height:100px;background-color:pink;">
    i am beauty div
    <div class="child" data-id="child" style="width:50px;height:50px;background-color:blue;">
      i am a child
</div>
  </div>
  <ul>
    <li><button>remove div</button></li>
    <li><button>empty div</button></li>

    <li><button>detach div</button></li>

  </ul>
</div>
  <script>
    var test =$(".test");
var child = $(".child");
var body = $("body");
test.on('click','.child',function(){
  $(this).addClass("selected");
});
$("button").eq(0).click(function(){
  body.append(test.remove());
});
$("button").eq(1).click(function(){
  var html ='<div class="child" style="width:50px;height:50px;background-color:blue;">'
      +'i am a child'
    +'</div>';
  test.empty().addClass("selected");
  test.append($(html));
  console.log(child.data("id"));
});
$("button").eq(2).click(function(){
  body.append(test.detach());
});
  </script>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jQuery删除元素方法remove(),detach(),empty()

jQuery删除元素方法remove(),detach(),empty()

[JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题

清空元素html("")、innerHTML="" 与 empty()的区别 一、清空元素的区别      1、错误做法一:            $("#test").html("");//该做...
  • szwangdf
  • szwangdf
  • 2014年11月05日 09:45
  • 32906

Jquery empty() remove() detach() 方法的区别

引言: 最近项目中用到了这几个方法,感觉很大程度上有些相似,查了Jquery的api,同时也找了很多博客文章,发现还是理解不到区别。最后在很多材料和自己的事例验证中,终于找到了区别,不敢独占特拿出来...

jQuery解读之empty、remove、detach区别

通过一张表来

在JQuery中让ajax执行完后再继续往下执行

$("#checkoutbt").click(function(){ $(".cart .list i.select").each(function(){ if(!$(this).hasCl...

延时执行刷新当前页面

setTimeout(function(){history.go(0);}, 1000);

jQuery删除元素方法remove(),detach(),empty()

1.empty() 它是清空节点,但是那些节点的标签还在。 结果是:p里面的都被删除了,...

jquery中使用detach 移除元素的使用场合

detach()函数用于从文档中移除匹配的元素,与remove()相比,detach()函数不会移除与元素关联绑定的附加数据( data()函数 )和事件等(remove()会移除)。 如果要删除以...
  • whaxrl
  • whaxrl
  • 2016年04月20日 22:56
  • 219

remove() 删除节点 | detach() 删除节点 | empty() 清空节点的内容 | clone() 复制节点

remove() 删除节点 | detach() 删除节点 | empty() 清空节点的内容 | clone() 复制节点 ...

jquery中remove()与detach()的区别

jquery是一个很大强的东西,在工作中常能用到,可是有些方法还是因为不常用到,或是没有注意到而被我们而忽略。   remove()和detach()可能就是其中的一个,可能remove()我们用得...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery中如何移除元素-remove(),empty(),detach()
举报原因:
原因补充:

(最多只允许输入30个字)