[Alexander Belov]

Привет!

Прошу помочь разобраться с ситуацией:
у меня есть 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 кода выше)

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