如何检查类名并将其从 html 列表中删除？答案

【问题标题】：how to check the classname and remove it in the html list?如何检查类名并将其从 html 列表中删除？
【发布时间】：2022-11-23 22:56:41
【问题描述】：

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
   <ul id="freelancer">
     <li class="item active">Name</li>
     <li class="item">Skills</li>
     <li class="item">Cost</li>
     <li class="item active">Projects</li>
   </ul>
  </div>
</body>
</html>

所以这里有 2 里可以使用活动类。我想在列表中找到活动类并从那里删除类名。我尝试了下面的例子来检查我是否会得到这个值。但它只检查出现的第一个 li。它不会在 li 上循环并检查。

const div = document.querySelector('li');
console.log(div.classList.contains('active'));

另一种方法是什么？

【问题讨论】：

标签： javascript html dom

【解决方案1】：

将 querySelector 更改为 querySelectorAll()。

也使用查询作为querySelectorAll(li.active)，这样您将获得 li 中的所有活动类。

然后迭代它并使用classList.remove()删除类，如item.classList.remove('active')

const activeClasses = document.querySelectorAll('li.active');

activeClasses.forEach(item => item.classList.remove('active'));

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
   <ul id="freelancer">
     <li class="item active">Name</li>
     <li class="item">Skills</li>
     <li class="item">Cost</li>
     <li class="item active">Projects</li>
   </ul>
  </div>
</body>
</html>

【讨论】：

【解决方案2】：

你应该使用 querySelectorAll(), 并使用 classList.Remove("ClassName);

这是一个工作示例：

function removeActive(){

  var activeItems = document.querySelectorAll('li.active');
 
  Array.prototype.forEach.call(activeItems, function(item) {
   
     item.classList.remove("active");
     
  });
 
}

.active{
color:red;
}

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
   <ul id="freelancer">
     <li class="item active">Name</li>
     <li class="item">Skills</li>
     <li class="item">Cost</li>
     <li class="item active">Projects</li>
   </ul>
   
   <button onclick="removeActive();">Remove active class</button>
  </div>
</body>
</html>

【讨论】：

【解决方案3】：

querySelector() 只返回第一场比赛。
如果您想要所有匹配项，请改用querySelectorAll()：

const activeLi = querySelectorAll('li.active')

【讨论】：