# .remove()

所属分类：DOM 操作 > DOM 移除 英文文档：.remove()

## .remove( [selector ] )返回: jQuery

描述: 将匹配元素集合从DOM中删除。（注：同时移除元素上的事件及 jQuery 数据。）

- #### 添加的版本: 1.0.remove( [selector ] )

  - selector
    类型: String
    一个选择器表达式用来过滤将被移除的匹配元素集合。

和 `.empty()`相似。`.remove()` 将元素移出DOM。 当我们想将元素自身移除时我们用 `.remove()`，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。要删除的元素不删除数据和事件的情况下，使用`.detach()`来代替。

请看下面的HTML:

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

可以移除任何想要移除的元素:

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

结果如下：

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

如果`<div class="hello">`元素里面有子元素，他们同样会被移除。还有元素上的事件及 jQuery 数据也会被删除。

我们也可以添加一个可选的选择器参数来过滤匹配的元素。例如，前面的代码可以重写为：

1 |
    $('div').remove('.hello');

结果将一样：

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

## 例子:

#### Example: 将所有段落从DOM删除：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
    <!DOCTYPE html><html><head>  <style>p { background:yellow; margin:6px 0; }</style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <p>Hello</p>  how are  <p>you?</p>  <button>Call remove() on paragraphs</button><script>$("button").click(function () {  $("p").remove();});</script> </body></html>

#### Demo:

#### Example: 从 DOM 中移除所有含有 "Hello" 的段落。也可以使用 `$("p").filter(":contains('Hello')").remove()` 达到相同的目的。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
    <!DOCTYPE html><html><head>  <style>p { background:yellow; margin:6px 0; }</style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <p class="hello">Hello</p>  how are  <p>you?</p>   <button>Call remove(":contains('Hello')") on paragraphs</button><script>$("button").click(function () {  $("p").remove(":contains('Hello')");});</script> </body></html>

#### Demo: