.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>
演示结果