jQuery文档操作-DOM移除操作

.detach(  [selector]  )

从DOM文档中移除匹配的元素

.detach([selector])

selector

类型是选择器

一个选择器表达式过滤匹配元素来被移除。

.detach()方法和.remove()方法相同，除了.detach()方法保持所有jQuery的data和移除元素的之间关联。当移除的元素又重新被添加到DOM中时，这个方法是很有用的。

<script>
    $("p").click(function(){
      $(this).toggleClass("off");
    });
    var p;
    $("button").click(function(){
      if ( p ) {
        p.appendTo("body");
        p = null;
      } else {
        p = $("p").detach();//detach()从文档中移除该元素并将元素赋值给变量p
      }
    });</script>

.empty()

从DOM文档中移除所有的匹配元素的孩子

.empty()

这个方法不接受任何参数。

这个方法不仅移除孩子（包括子孙）元素，还包括匹配元素中的任何文本。这是因为，根据DOM的规范，元素内部的任何文本字符串都被认为是该元素的孩子节点（这里不了解的可以查查相关文档）。

如下HTML：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

我们能够指定任何可被移除的元素：

$('.hello').empty();

这个会导致DOM结构的Hello 文本会被删除:

<div class="container">
  <div class="hello"></div>
  <div class="goodbye">Goodbye</div>
</div>

如果我们有任意数量的嵌套的元素在<div class="hello">内部，他们也会被移除。

为了避免内存泄漏，jQuery在移除元素自身（指的是empty操作）之前会从他们孩子元素中移除其他的部分如data和even handlers 。如果你希望移除元素时不破坏他们的data或event handlers（因为他们能以后被重新添加），使用.detach()代替。

.remove(  [selector]  )

从DOM文档中移除匹配的元素

.remove([selector])

selector

参数类型是字符串。

一个选择器表达式过滤匹配的元素来被移除。

和.empty()方法一样，.remove()方法从DOM中移除元素。当你希望移除元素自身时以及元素内部的任何东西，使用.remove()方法。除了元素自身之外，所有和元素绑定的events和关联的jQuery data都会被移除。移除元素时，不希望移除data和events，使用.detach()代替。

如下HTML：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

我们能指定任何元素被移除：

$('.hello').remove();

这个会导致<div>元素的DOM结构被删除：

<div class="container">
  <div class="goodbye">Goodbye</div>
</div>

如果我们在<div class="hello">的内部有任何数量的嵌套元素，他们也会被移除。其他jQuery的构造如data或event handlers也会被移除。

我们也可以能添加一个选择器作为可选的参数。如，我们重写现在的DOM的移除代码如下：

$('div').remove('.hello');//在匹配的元素上追加选择来匹配元素，然后移除

这个会产生相同的DOM结构：

<div class="container">
  <div class="goodbye">Goodbye</div>
</div>