jQuery 删除元素

jQuery提供 remove() 和 empty() 方法来从HTML文档中删除现有的HTML元素。

jQuery remove() 方法

jQuery remove() 方法从文档中删除所选元素及其子元素。

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

$(selector).remove();

当你想要移除元素本身以及其中的所有内容时，应该使用 remove() 方法。

概要

考虑以下HTML内容：

<div class="container">
   <h2>jQuery remove() Method</h2>
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
</div>

现在，如果我们按照以下方式使用 remove() 方法：

$( ".hello" ).remove();

它将产生以下结果：

<div class="container">
   <h2>jQuery remove() Method</h2>
   <div class="goodbye">Goodbye</div>
</div>

如果我们在

标签内有任意嵌套元素，它们也将被移除。

示例

让我们尝试以下示例并验证结果：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
    $(document).ready(function() {$ ("button").click(function(){
         $( ".hello" ).remove();
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery remove() Method</h2>
      <div class="hello">Hello</div>
      <div class="goodbye">Goodbye</div>
   </div>
   <br>

   <button>Remove Text</button>
</body>
</html>

使用过滤器删除

我们还可以将选择器作为 remove() 方法的可选参数传入。例如，我们可以将上述DOM删除代码重写如下：

让我们尝试以下示例并验证结果：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
    $(document).ready(function() {$ ("button").click(function(){
         $("div").remove(".hello");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery remove(selector) Method</h2>
      <div class="hello">Hello</div>
      <div class="goodbye">Goodbye</div>
   </div>
   <br>

   <button>Remove Text</button>
</body>
</html>

jQuery empty() 方法

jQuery empty() 方法与 remove() 方法非常相似，它会从文档中移除所选的元素及其子元素。这个方法不接受任何参数。

以下是 empty() 方法的语法：

$(selector).empty();

当你想要移除元素本身以及其中的所有内容时，应该使用 empty() 方法。

概要

考虑以下HTML内容：

<div class="container">
   <h2>jQuery empty() Method</h2>
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
</div>

现在，如果我们按照以下方式应用 empty() 方法：

$( ".hello" ).empty();

它将产生以下结果：

<div class="container">
   <h2>jQuery empty() Method</h2>
   <div class="goodbye">Goodbye</div>
</div>

示例

让我们来尝试下面的示例，验证结果：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
    $(document).ready(function() {$ ("button").click(function(){
         $( ".hello" ).empty();
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery empty() Method</h2>
      <div class="hello">Hello</div>
      <div class="goodbye">Goodbye</div>
   </div>
   <br>

   <button>Remove Text</button>
</body>
</html>