jQuery 删除元素

在 web 开发中，经常会遇到需要删除页面上的元素的情况。jQuery 提供了简单的方法来删除元素，让我们来学习如何使用它们。

使用 remove() 方法删除元素

jQuery 中最常用的删除元素的方法是 remove()。这个方法会彻底地从 DOM 中移除元素及其所有的事件处理程序和数据。下面是一个简单的例子：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>jQuery 删除元素示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="myDiv">
  <p>要删除的段落</p>
</div>

<button id="deleteBtn">删除</button>

<script>
  $(document).ready(function(){
    $("#deleteBtn").click(function(){
      $("#myDiv").remove();
    });
  });
</script>

</body>
</html>

在这个例子中，当点击按钮时，remove() 方法会删除 id 为 myDiv 的 div 元素及其内部的所有内容。

使用 empty() 方法清空元素内容

如果你只是想清空一个元素的内容而不是完全删除它，可以使用 empty() 方法。这个方法会删除元素的所有子元素，但是会保留元素本身。下面是一个例子：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>jQuery 清空元素内容示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="myDiv">
  <p>要清空的段落</p>
</div>

<button id="emptyBtn">清空</button>

<script>
  $(document).ready(function(){
    $("#emptyBtn").click(function(){
      $("#myDiv").empty();
    });
  });
</script>

</body>
</html>

在这个例子中，当点击按钮时，empty() 方法会清空 id 为 myDiv 的 div 元素中的所有内容，但是保留元素本身。

通过这些方法，你可以方便地删除或清空页面上的元素，让页面的交互更加灵活和动态。