返回值:jQueryremove([selector])

从 DOM 中移除匹配的元素，同时移除元素上的事件及 jQuery 数据。

和 .empty() 类似，.remove() 方法会从 DOM 中删除元素。如果想移除某元素及其所有子元素，可以使用 .remove()。该方法除了会移除匹配的元素外，还会移除这些元素上绑定的事件及 jQuery 数据。如果只想移除元素而保留元素上的事件及数据，请使用 .detach() 来代替。

例如，有如下的 HTML:

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

可以移除任何想要移除的元素:

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

上面的代码会从 DOM 中移除含有 hello 样式的 <div>，其结果如下: 

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

如果 <div class="hello"> 元素中还嵌套有其它的元素，那么这些嵌套的元素也会删除移除。与此同时，被移除元素上的事件及 jQuery 数据也会被删除。

也可以使用可选的 selector 参数。例如，我们可以重写上面的例子，实现相同的结果:

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

其结果和上面的例子一样：

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

示例:

从 DOM 中移除所有的段落。

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

演示:

示例:

从 DOM 中移除所有含有 "Hello" 的段落。也可以使用 $("p").filter(":contains('Hello')").remove() 达到相同的目的。

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

演示: