.remove()

.remove( [ selector ] ) 返回:jQuery

描述:将匹配元素从DOM中删除。

  • version added: 1.0.remove( [ selector ] )

    selector一个选择表达死用来过滤匹配的将被移除的元素。

.empty()相似。.remove() 将元素移出DOM。 当我们想将元素自身移除时我们用 .remove(),同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。

请看下面的HTML:

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

我们可以移除里面的任何目标元素:

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

结果如下:

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

如果<div class="hello">元素里面有子元素,他们同样会被移除。于它相关的事件句柄也将被擦除。

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

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

结果将一样:

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

Examples:

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

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; margin:6px 0; }</style>
  <script src="http://code.jquery.com/jquery-latest.min.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: 将所有包含"Hello"的段落从DOM中删除。

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; margin:6px 0; }</style>
  <script src="http://code.jquery.com/jquery-latest.min.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:

jQuery 1.6 API 中文版脚本之家整理、修订 (2011年6月)