Удалите один из нескольких классов, если он существует. Javascript

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

Попробуйте выбрать все элементы «Ли», используя querySelectorAll функцию.

Так что запрос, чтобы выбрать все «Ли» элементы были бы: var NumThree = document.querySelectorAll("li")

Answer 4

Как и другие ответы в значительной степени есть это покрыто, вы могли бы подумать о том, как вы могли бы реорганизовать код так, что функция повторного использования.

Здесь проходят в элементе и класса в качестве параметров для более общей функции:

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

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