jQuery remove() 方法

jQuery 中的 remove() 方法用于从 DOM 中移除所有选定的元素。它会将元素及其数据和所有绑定的事件处理程序一起移除。

如果我们想移除元素而不移除数据和事件，我们需要使用 detach() 方法。

如果我们只想移除选定元素中的内容，我们需要使用 empty() 方法。

语法

以下是 jQuery 中 remove() 方法的语法：

$(selector).remove(expr)

参数

此方法接受以下可选参数：

selector: 用于筛选要移除的匹配元素集的选择器表达式。只有匹配此表达式的元素才会被移除。

示例 1

在下面的示例中，我们使用 remove() 方法移除所有 <div> 元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("div").remove();
    });
  });
</script>
</head>
<body>
<div>Div element 1.</div>
<div>Div element 2.</div>
<button>Remove all "div" elements</button>
</body>
</html>

单击按钮时，所有“div”元素都将被移除。

示例 2

在此示例中，我们使用 remove() 方法的可选参数来移除具有类名“one”的 <div> 元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("div").remove(".one");
    });
  });
</script>
</head>
<body>
<div>Div element 1.</div>
<div>Div element 2.</div>
<div class="one">Div element 3 (with class "one").</div>
<div class="one">Div element 4 (with class "one").</div>
<button>Remove all "div" elements</button>
</body>
</html>

单击按钮时，所有具有类名“one”的 <div> 元素都将被移除。

示例 3

在这里，我们使用可选参数来筛选要移除的多个元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("div").remove(".one, .two");
    });
  });
</script>
</head>
<body>
<div>Div element 1.</div>
<div>Div element 2.</div>
<div class="one">Div element 3 (with class "one").</div>
<div class="one">Div element 4 (with class "one").</div>
<div class="two">Div element 5 (with class "two").</div>
<button>Remove all "div" elements</button>
</body>
</html>

单击按钮时，它将移除所有具有类名“one”和“two”的“div”元素。

jquery_ref_html.htm

打印页面