.detach( [selector] )
从DOM文档中移除匹配的元素
.detach([selector])
selector
类型是选择器
一个选择器表达式过滤匹配元素来被移除。
.detach()方法和.remove()方法相同,除了.detach()方法保持所有jQuery的data和移除元素的之间关联。当移除的元素又重新被添加到DOM中时,这个方法是很有用的。
<script>
$("p").click(function(){
$(this).toggleClass("off");
});
var p;
$("button").click(function(){
if ( p ) {
p.appendTo("body");
p = null;
} else {
p = $("p").detach();//detach()从文档中移除该元素并将元素赋值给变量p
}
});</script>
.empty()
从DOM文档中移除所有的匹配元素的孩子
.empty()
这个方法不接受任何参数。
这个方法不仅移除孩子(包括子孙)元素,还包括匹配元素中的任何文本。这是因为,根据DOM的规范,元素内部的任何文本字符串都被认为是该元素的孩子节点(这里不了解的可以查查相关文档)。
如下HTML:
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
我们能够指定任何可被移除的元素:
$('.hello').empty();
这个会导致DOM结构的Hello 文本会被删除:
<div class="container">
<div class="hello"></div>
<div class="goodbye">Goodbye</div>
</div>
如果我们有任意数量的嵌套的元素在<div class="hello">内部,他们也会被移除。
为了避免内存泄漏,jQuery在移除元素自身(指的是empty操作)之前会从他们孩子元素中移除其他的部分如data和even handlers 。如果你希望移除元素时不破坏他们的data或event handlers(因为他们能以后被重新添加),使用.detach()代替。
.remove( [selector] )
从DOM文档中移除匹配的元素
.remove([selector])
selector
参数类型是字符串。
一个选择器表达式过滤匹配的元素来被移除。
和.empty()方法一样,.remove()方法从DOM中移除元素。当你希望移除元素自身时以及元素内部的任何东西,使用.remove()方法。除了元素自身之外,所有和元素绑定的events和关联的jQuery data都会被移除。移除元素时,不希望移除data和events,使用.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的构造如data或event handlers也会被移除。
我们也可以能添加一个选择器作为可选的参数。如,我们重写现在的DOM的移除代码如下:
$('div').remove('.hello');//在匹配的元素上追加选择来匹配元素,然后移除
这个会产生相同的DOM结构:
<div class="container">
<div class="goodbye">Goodbye</div>
</div>