JavaScript 如何删除类

介绍：

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

这个概念的需求

从HTML中删除类可能是必要的原因有很多。我们在使用HTML、CSS和JavaScript创建幻灯片时遇到一个示例。我们在开发幻灯片时创建了主要类，然后通过添加和删除它来调整幻灯片。结果，我们的幻灯片可以更改照片。如果您对此不熟悉，可以在这里阅读文章。

由于JavaScript可以更改HTML元素，因此我们很容易修改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应用程序时，使用起来更简单。

语法：

element.classList.remove(className);

toggleClass方法

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

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

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

语法：

$(elementName).toggleClass(className);

removeClass方法

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

语法：

$(elementName).removeClass(className);

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

JavaScript中删除类的示例

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

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

JavaScript中删除类的一些示例

使用remove方法的示例：

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learning How to remove class in JS</title>
<style>
.main {
  width: 100%;
  padding: 25px;
  background-colour: coral;
  colour: white;
  font-size: 25px;
  box-sizing: border-box;
  margin:10px 0px 0px 0px;
}
</style>
</head>
<body>
<p>Click the "Remove Class" button to remove the "main" class from the DIV element:</p>

<button onclick="removeClass()">Remove Class</button>

<div id="mainDiv" class="main">
    This is a DIV element.
</div>

<script>
    function removeClass() {
      var element = document.getElementById("mainDiv");
element.classList.remove("main");
    }
</script>
</body>
</html>

解释：

在上面的示例中，我们从 div元素 中移除了类名为 main 的类。我们使用唯一的元素id mainDiv 找到了这个元素。之后，我们添加了事件监听器 onclick ，当用户点击按钮时触发 removeClass 方法。这个函数简单地删除了元素的类名main。

使用toggleClass方法的示例：

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learning How to toggle class in JQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
.main {
  width: 100%;
  padding: 25px;
  background-colour: coral;
  colour: white;
  font-size: 25px;
  box-sizing: border-box;
  margin:10px 0px 0px 0px;
}
</style>
</head>
<body>

<p>Click the "Toggle Class" button to Toggle the "main" class from the DIV  element:</p>

<button onclick="toggleClass()">Toggle Class</button>

<div id="mainDiv" class="main">
  This is a DIV element.
</div>
<script>
function toggleClass() {
  $("#mainDiv").toggleClass("main");
}
</script>
</body>
</html>

解释：

在上面的示例中，我们从div元素中移除了class为 main 的类。我们使用了id为 mainDiv 的唯一元素选择器。然后，我们添加了 onclick 的事件监听器，当用户点击按钮时，它会激活 toggleClass 方法。该函数简化了切换元素的class main的过程。用户可以将该class从 mainDiv 中删除并再次添加。这种方法不像删除类的方法那样完全从 mainDiv 中删除类。当按钮被点击两次时，该类会在第一次被删除后再次被添加回来。

如果您打算使用这种方法，请确保在head标签中或body标签的末尾包含 JQuery 脚本。否则，浏览器将无法识别该函数，并且其影响将不会渲染。

使用removeClass方法的示例：

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learning How to remove class in JQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
.main {
  width: 100%;
  padding: 25px;
  background-colour: coral;
  colour: white;
  font-size: 25px;
  box-sizing: border-box;
  margin:10px 0px 0px 0px;
}
</style>
</head>
<body>

<p>Click the "Remove Class" button to Toggle the "main" class from the DIV element:</p>

<button onclick="removeClassJQuery()">Remove Class</button>

<div id="mainDiv" class="main">
  This is a DIV element.
</div>
<script>
    function removeClassJQuery() {
      $("#mainDiv").removeClass("main");
    }
</script>
</body>
</html>

解释：

在上面的示例中，我们从中 删除了 类名为“main”的类。我们使用特定的元素id“mainDiv”选择该元素。当用户点击按钮时，会激活 onclick事件监听器 ，该事件监听器调用了 removeClassJQuery函数 。该函数可以简单地删除元素的类名为main的类。