.remove()| jqueryAPI 2.2 中文手册- AspRain.cn 致力于Web开发技术翻译整理

jQuery API 2.2.0

.remove()

分类:操纵 > DOM删除

返回: jQuery

.remove( [selector ] )

描述:从DOM中删除匹配的元素集合。

加入于: 1.0
.remove( [selector ] )
  • selector
    类型:String
    一个选择器表达式,用来筛选要匹配的元素集合,以删除它们。

近似于.empty().remove()方法把元素移出DOM。当你想删除元素本身,以及它里面的所有元素时,请使用.remove()方法。除了元素本身,所有的绑定的事件,以及与这些元素有关联的jQuery数据也被删除了。要想删除元素,但是不删除数据和事件,请使用.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构造,比如说数据或者事件处理函数,也一起擦除了。

我们还可以包含一个选择器,作为可选的参数。举个例子,我们可以重写上一个DOM删除代码,如下所示:

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

这将导致同样的DOM结构:

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

示例

从DOM中删除所有的段落文本。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>remove demo</title>
  <style>
  p {
    background: yellow;
    margin: 6px 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

演示结果

从DOM中删除所有包含“Hello”的段落文本。类似于执行$("p").filter(":contains('Hello')").remove()

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>remove demo</title>
  <style>
  p {
    background: yellow;
    margin: 6px 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

演示结果

如果网页上不能运行示例,请点击http://www.asprain.cn/jQueryAPI/remove.htm查看示例。

如果你觉得本文档对你有用,欢迎给翻译作者支付宝打赏,支持翻译作者源源不断翻译更多有用的技术文档。