jQuery 删除淡出后的 DOM 元素

在本文中，我们将介绍如何使用 jQuery 在 DOM 元素淡出之后删除它们。

什么是 jQuery？

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它简化了与 HTML 文档、处理事件、执行动画和处理 AJAX 的代码编写过程。jQuery 的核心原则是”写少量的代码，做更多的事情”。因此，它提供了一种简洁而强大的方式来操纵 HTML 文档和处理事件。

使用 fadeOut() 方法淡出 DOM 元素

在 jQuery 中，要实现 DOM 元素的淡出效果，可以使用 fadeOut() 方法。该方法将使被选元素逐渐消失，直到完全隐藏。下面是 fadeOut() 方法的示例：

$("#elementId").fadeOut();

上述代码将通过 ID 选择器选中具有特定 ID 的元素，并淡出它。

需要注意的一点是 fadeOut() 方法默认使用 400 毫秒的持续时间来完成淡出效果。如果想要自定义持续时间，可以将毫秒值作为参数传递给该方法。例如，下面的代码将使元素在 1 秒钟内渐渐消失：

$("#elementId").fadeOut(1000);

删除淡出后的 DOM 元素

在淡出一个 DOM 元素之后，要彻底删除它，可以使用 remove() 方法。该方法将从文档中删除所选元素及其子元素。下面是使用 remove() 方法删除淡出后元素的示例：

$("#elementId").fadeOut(1000, function(){
  $(this).remove();
});

在上述代码中，通过使用回调函数来处理 fadeOut() 方法的结束。在结束时，调用 remove() 方法将所选元素从 DOM 中删除。

示例

下面给出一个完整的示例，展示如何使用 jQuery 删除淡出后的 DOM 元素：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 删除淡出后的 DOM 元素</title>
  <script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: red;
      margin-bottom: 10px;
    }
  </style>
  <script>
     $(document).ready(function(){$ (".box").click(function(){
         $(this).fadeOut(1000, function(){$ (this).remove();
        });
      });
    });
  </script>
</head>
<body>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</body>
</html>

上述示例中，使用了一个 box 类来添加红色的方块，并绑定了点击事件。每当点击一个方块，它将在 1 秒钟内淡出并从 DOM 中删除。