.remove()
返回: jQuery
.remove( [selector ] )
描述:从DOM中删除匹配的元素集合。
近似于.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>
演示结果