Удалить динамически добавленный класс, если он существует
 

Привет!

Прошу помочь разобраться с ситуацией:
у меня есть ul, в который динамически добавляю li, присваивая сразу класс tab и active.
При добавлении нового li мне нужно проверить, существует ли уже li с классом active, и если да, то удалить класс active у "старого" li. Чтобы среди li был всегда только один элемент с классом active.

Вроде бы, всё просто, но не получается сделать такую проверку.

//Create a new Tab
	var tabs = document.querySelector("#tabs"),
		newContent = document.createElement("div"),
		defaultDiv = document.querySelector("#defaultDiv"),
		ok = document.querySelector("#ok"),
		cancel = document.querySelector("#cancel"),
		name = document.querySelector("#name"),
		note = document.querySelector("#note"),
		activeTab = document.getElementsByClassName("tab active");//Наш li с классами tab и active

	//OK button onclick
	ok.onclick = function createTab(){

		var newTab = document.createElement("li");

                  console.log(activeTab);

		  if(activeTab !== null) {
			activeTab.classList.remove("active")
		   }

		newTab.innerHTML = name.value;

		if (newTab.innerHTML == "") {
			alert ("Gimme a name!");

			showBgr();
		}
	
		else {

			tabs.appendChild(newTab);
			newTab.setAttribute("data-attr", name.value);
			newTab.classList.add("tab", "active");
			tabs.insertBefore(newTab, defaultTab);

			defaultDiv.appendChild(newContent);
			newContent.innerHTML = note.value;
			newContent.setAttribute("data-attr", name.value);
			newContent.classList.add("content", "active");
		}

		foldPopup();
	};

JS Bin

Консоль выводит li с классом tab active, а когда функция срабатывает, то уже выдаётся ошибка Cannot read property "remove" of undefined (Строчки 16-20 кода выше)

Прошу подсказать, почему не работает функция и как это исправить.

Alexander Belov,
выберите из элеметов нужный

рони,
Так они вообще не должны по идее присутствовать несколько сразу. Только 1 элемент li с классом active должен быть.

activeTab = document.getElementsByClassName("tab active");

Определяю его в переменной activeTab

При клике на кнопку проверяю, есть ли такой элемент уже.

if(activeTab !== null) {
       activeTab.classList.remove("active")
    }

Не равен нулю, значит, есть. Значит, удаляем у него класс active.

По этому раскладу в принципе не должна идти проверка среди нескольких элементов, такой элемент всегда один.
А по факту получается, что функция игнорирует это и класс active вообще не удаляется. Хотя сам элемент через console.log определяется.

Alexander Belov,

activeTab[0].classList.remove("active")

getElementsByClassName("

рони,
Так пробовал тоже, всё равно функция выводит ошибку Cannot read property "remove" of undefined

Alexander Belov,
а так?

if(activeTab.length) {
       activeTab[0].classList.remove("active")
    }

рони,
Благодарю! Всё как нужно теперь!

Можете объяснить, почему activeTab !== null не сработал?

Alexander Belov,
посмотрите что возвращает getElementsByClassName или прочитайте документацию на этот метод.

Как вам сказал Рони, вы get(берёте)ElementSS(ЭлементЫЫ)
То есть когда вы вызываете этот метод, он возвращает вам массив элементов. Путь там даже 1 элемент, js не знает какой именно вам Нужен. Во этому вам каждый рах надо указывать номер элемента.
Так как массив не равен нулл даже если массив пустой.
Так что либо сделать как Рони посоветовал, запросить длину массива, потому как в случае возврата нуля, это значение будет преобразовано к false. Либо указать на первый элемент этого массива. В случае отсутствия которого будет ясно что таких элементов не существует.

if(activeTab[COLOR="red"][0][/COLOR] !== null) {
            activeTab[COLOR="Red"][0][/COLOR].classList.remove("active")
           }

Всегда со всеми методами ElementSSS проверяйте указали ли вы ссылку на конкретный элемент.

Leon-on12,
да, я в курсе, что getElementsByClassName - это массив, но я расчитывал, что getElementsByClassName("active")[0] - это и есть точное указание на элемент, т.к. у него есть класс active, значит, он существует в массиве под номером [0].
Я просто присваивал также

var activeTab = document.getElementsByClassName("tab active")[0]

Но и так не работало.