Question

我需要检查并删除元素的特定类。我需要它只使用Javascript来完成，我设法找到的主要是JQuery或非工作变体给我。

这是我的代码：

 <ul>
   <li class = "tab"><a href="#">One</a></li>
   <li class = "tab"><a href="#">Two</a></li>
   <li class = "tab active"><a href="#">Three</a></li>
   <li class = "tab"><a href="#">Four</a></li>
 </ul>


 var NumThree = document.querySelector("li.tab active")

 function removeActiveClass(){
     if(NumThree !== null) {
         NumThree.classList.remove("active")
     }
 }

和FIDDLE

我的代码没有删除该类。所以我要求 100％Javascript 帮助！

Answer 1

您需要将选择器更正为document.querySelector("li.tab.active")或仅更改为document.querySelector(".active")并将该功能解除为removeActiveClass()。与here一样。

Answer 2

几个错别字， Working Fiddle 。问题出在您使用选择器的方式上，document.querySelector("li.tab active")会在active中使用类li查找元素名称tab（该空间用于搜索对于儿童元素）。您真正想要的是li同时包含tab和active类，所以它应该是document.querySelector("li.tab.active")

var NumThree = document.querySelector("li.tab.active")

function removeActiveClass(){    
    if(NumThree !== null) {
      NumThree.classList.remove("active");
    }
}

removeActiveClass();

Answer 3

由于其他答案几乎涵盖了这一点，您可能会考虑如何重构代码以便函数可重用。

这里，将元素和类作为参数传递给更通用的函数：

function removeClass(el, c) {
  if (el) el.classList.remove(c);
}

var NumThree = document.querySelector('li.tab.active')
removeClass(NumThree, 'active');

Answer 4

尝试使用querySelectorAll函数选择所有“li”元素。

因此，选择所有“li”元素的查询将是：var NumThree = document.querySelectorAll("li")

删除多个类中的一个（如果存在）Javascript

4 个答案: