返回值:jQueryempty()

从 DOM 树中移除匹配元素的的所有子节点。

该方法不仅移除子元素（还包括其后代元素），而且还包括匹配元素集合中的任何文本节点。这是因为，根据 DOM 规范，任何元素中的文本字符串都被认为是该元素的子节点。例如，有如下的 HTML：

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

我们可以移除任何想要移除的元素：

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

上述的代码的执行结果是，Hello 这个文本从 DOM 树中被删除了： 

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

如果在 <div class="hello"> 中还嵌套了其它元素的话，它们也会被一同删除。

为了避免内存泄露，jQuery 在移除元素子元素自身之前，会先移除这些元素上绑定的 data 数据及事件处理函数。

如果你只想移除元素，但是不想删除元素上绑定的 data 数据或事件处理函数的话（这样的话，这些绑定的信息还可以在之后被重新添加回来），请使用 .detach() 方法。

示例:

移除段落中所有的子节点（包括文本节点）

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:yellow; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>

<p>
  Hello, <span>Person</span> <a href="javascript:;">and person</a>
</p>

<button>Call empty() on above paragraph</button>

<script>


  $("button").click(function () {
    $("p").empty();
  });


</script>
</body>
</html>

演示: