从所有 li javascript 中删除活动类 - Html

在编写 Web 应用程序时，经常需要使用 JavaScript 动态地更改 HTML 元素的类。其中一个常见的任务是从多个元素中删除一个特定的类。在本文中，我们将学习如何使用 JavaScript 从所有 li 元素中删除活动类。

获取所有 li 元素

首先，我们需要获取所有的 li 元素。我们可以使用以下代码行实现：

const listItems = document.querySelectorAll('li');

此代码将返回一个 NodeList 对象，其中包含文档中所有的 li 元素。接下来，我们需要循环遍历该 NodeList，以查找并删除具有活动类的任何 li 元素。

删除活动类

我们可以使用以下代码来删除具有活动类的 li 元素：

for (let i = 0; i < listItems.length; i++) {
  if (listItems[i].classList.contains('active')) {
    listItems[i].classList.remove('active');
  }
}

此代码将遍历 NodeList 中的每个 li 元素。如果当前 li 元素具有活动类，则其将通过调用 remove() 函数来删除此类。

完整代码

下面是完整代码的示例：

const listItems = document.querySelectorAll('li');

for (let i = 0; i < listItems.length; i++) {
  if (listItems[i].classList.contains('active')) {
    listItems[i].classList.remove('active');
  }
}

结论

使用上述代码，您可以轻松地从所有 li 元素中删除具有活动类的元素。这将使您的代码更加模块化和可维护，因为您只需更改类的名称即可在多个元素中执行操作。