.empty()

类别：文档处理 > DOM删除

.empty()返回类型：jQuery

描述：从DOM中删除匹配的元素集合的所有子元素节点。

  • 增补版本：1.0.empty()

    • 此方法不接受任何参数。

此方法不仅是删除了子元素（以及其它后代元素），而且还删除了匹配的元素集合内部的文本。这是因为，根据DOM规范文档，一个元素内部的文本的字符串被视为那个元素的子节点。请考虑下面的HTML：

1
2
3
4
 
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

我们可以瞄准任何要删除的元素：

1
 
$( ".hello" ).empty();

这将导致任何带有Hello类的DOM结构被删除：

1
2
3
4
 
<div class="container">
  <div class="hello"></div>
  <div class="goodbye">Goodbye</div>
</div>

如果在<div class="hello">内有一些嵌套元素，它们也会被删除。

为了避免内在泄漏，在删除元素本身之前，jQuery先从子元素中删除了其它结构，譬如数据和事件处理函数。

如果你想要删除元素，而不破坏它们的数据或事件处理函数（从而它可以以后再次添加），请使用.detach()方法代替。

示例：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>empty demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>
  Hello, <span>Person</span> <em>and person</em>.
</p>
 
<button>Call empty() on above paragraph</button>
 
<script>
$( "button" ).click(function() {
  $( "p" ).empty();
});
</script>
 
</body>
</html>

演示：