如何在 JavaScript 中移除类

引言

文档对象模型 (DOM) 是 HTML 和 XML 中的一个基本概念。HTML 经常出于多种原因使用 DOM 操作。可以使用 DOM 操作添加或删除 HTML 元素。JavaScript 允许我们从 HTML 中添加或删除属性、类和 ID。我们还可以使用其他 JavaScript 工具（如 JQuery）来操作 DOM。在本教程中，我们将学习如何从 JavaScript 中移除一个类。

此概念的必要性

从 HTML 中移除类可能出于多种原因。我们曾遇到过一个案例，当时我们使用 HTML、CSS 和 JavaScript 创建了一个滑块。在开发滑块时，我们创建了主类，然后通过从图像中添加和移除它来对其进行操作。因此，我们的滑块可以切换照片。如果您不熟悉此内容，可以在此处阅读文章。

由于 JavaScript，我们可以更简单地修改 HTML 元素，并且添加或删除项目和特性也很简单。由于 Jquery 是一个 JavaScript 库，我们也可以使用它来移除类。Jquery 和 JavaScript 都有各种内置方法可以用来移除类。我们将依次检查每个方法，以便我们了解它们是如何运作的。

一个 待办事项列表 是使用 JavaScript、CSS 和 HTML 创建的。用户输入他们必须执行的任务。所有这些任务默认都是活跃的，并且必须完成。现在，一项任务已经完成，用户可以将其从他们的待办事项列表中划掉。

待办事项列表 项目最初包含 class=active 前缀。它告知用户任务仍处于开放状态，需要完成。完成任务后，用户必须从行动项的 待办事项列表 中移除 class=active。这样，用户就会被告知任务已完成。使用 JavaScript 或 Jquery，您可以从 HTML 中移除该类。

您可以使用 JavaScript 或 Jquery 快速移除一个类。让我们检查并了解如何从 JavaScript 中移除一个类。

如何在 JavaScript 中移除一个类？

JavaScript 和 JQuery 都提供了多种内置方法来移除一个类。让我们检查这些方法中的每一个，并了解它们如何运作。

删除法

JavaScript 有一个简单的函数叫做 remove，你可以用它来移除类。只需指定你想要从哪个元素中移除类即可。选择的元素后，可以调用该元素的 classList 函数 的 remove 函数。classList 函数 列出了与给定元素关联的每个类。你可以选择你想要从类列表中移除的类，并将其提供给 remove 方法。remove 方法也接受多个参数。你可以指定你想要从元素中移除的所有类。这使得在开发需要处理同一元素的多个类的复杂 Web 应用程序时，工作变得更简单。

语法

toggleClass 方法

JavaScript 中的 delete 方法 类似于 toggleClass 方法。主要区别在于它只是暂时移除类的某些方面，而不是完全删除它。当您想要切换一个类时，您会使用 toggleClass 函数。

您可以使用 toggleClass 函数 从元素中 添加 或 删除 同一个类。例如，假设您希望在按下按钮时移除一个类。但是，您希望在再次单击按钮时 添加 已删除的同一个类。在这种情况下，您可以使用 toggleClass 函数。toggleClass 方法 只能与 JQuery 一起使用。

toggleClass 函数 用于您想要切换类的元素，就像 remove 方法一样。

语法

removeClass 方法

在 jQuery 中使用 removeClass 函数 来移除类，而不是切换它。removeClass 函数 可以完全移除 JQuery。removeClass 和 toggleClass 的语法相同，但它们的功能完全不同。如果没有在 JQuery 中使用 addClass 方法，通过 removeClass 方法已经移除的类就不能再次添加。它会从元素中永久移除。

语法

让我们通过一些真实世界的例子来练习使用 JavaScript 移除类。

JavaScript 中移除类的示例

现在，我们将看到在 JavaScript 和 JQuery 中 移除 类的示例。我们还将通过实际应用学习 JavaScript 和 JQuery 中所有三种移除类的方法。

在现实世界中，当我们开发任何需要 移除 类的功能时，我们通常会使用特定类型的 事件监听器。当用户执行特定操作（例如按下按键或单击按钮）时，我们启动从元素中移除类的过程。

JavaScript 中移除类的一些示例

使用 remove 方法的示例

在此示例中，我们将使用 JavaScript 的 remove 方法从 HTML 元素中移除一个类。

说明

在上面的示例中，我们从 div 元素 中移除了类 main。我们使用独特的元素 id mainDiv 选择了该元素。之后，我们包含了事件监听器 onclick，当用户点击按钮时，它会启动 removeClass 方法。该函数可以简单地删除元素的主类。

使用 toggleClass 方法的示例

在此演示中，我们将使用 JQuery 的 toggleClass 方法从 HTML 元素中移除一个类。

说明

在上面的示例中，我们从 div 元素 中移除了类 main。我们使用独特的元素 id mainDiv 选择了该元素。之后，我们添加了 事件监听器 onclick，当用户点击按钮时，它会激活 toggleClass 方法。该函数使得切换元素的主类变得简单。用户可以从 mainDiv 中移除该类并再次添加。此方法不会像 remove class 方法那样从 mainDiv 函数中完全删除该类。当按钮被点击两次时，在第一次移除后，该类会再次添加。

如果您打算使用此方法，请确保将 JQuery 脚本包含在 head 标签中或 body 标签的末尾。否则，浏览器将无法识别该函数，并且其效果将无法呈现。

使用 removeClass 方法的示例

在此示例中，我们将使用 JQuery 的 removeClass 方法从 HTML 元素中移除一个类。

说明

在上面的示例中，我们从 div 元素 中 删除了 类 main。我们使用独特的元素 id mainDiv 选择了该元素。当用户点击按钮时，会添加激活 removeClassJQuery 函数 的 事件监听器 onclick。该函数使得删除元素的主类变得简单。

结论

1. 您可以使用 DOM 操作 在 JavaScript 和相关库（例如 JQuery）中移除类。
2. 根据您想要移除类的方式以及您正在使用的库，您可以使用多种不同的技术。
3. JavaScript 中的 remove 方法允许您永久从任何 HTML 元素中移除 class 属性。
4. JQuery 提供的 removeClass 方法 永久地从任何 HTML 元素 中移除一个类。