querySelectorAll / is not a valid selector

[рони]

Alexander Belov,

tabSpan.addEventListener('click', removeTab([newTab, newContent]));

//Remove tab
function removeTab(nodeArr) {
     return function() {
         nodeArr.forEach(function(el) {
           el.parentNode && el.parentNode.removeChild(el);
         });
     }
 };

[Alexander Belov]

рони,
Да, сразу не сообразил, о чём речь. Благодарю!

[Alexander Belov]

рони,
дописал код на добавление / удаление вкладок. По итогу получается, что при удалении всё равно нужно выборку делать, потому подойдёт тот код, что Вы посоветовали в посте №11.

Получается следующее:

//Create a new Tab + Content
	var tabs = document.querySelector("#tabs"),
		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"),
		activeDiv = document.getElementsByClassName("content active"),
		tabsArr = [],
		contentArr = [];

tabsArr и contentArr - пустые массивы для добавления новых вкладок и нового контента соответственно.

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

		var newTab = document.createElement("li"),
			tabSpan = document.createElement("span"),
			newContent = document.createElement("div");

		activeTab.length ? activeTab[0].classList.remove("active") : 0;
		activeDiv.length ? activeDiv[0].classList.remove("active") : 0;



		newTab.innerHTML = name.value;

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

			showBgr();
		}
	
		else {

			tabs.appendChild(newTab);
			newTab.classList.add("tab", "item", "active");
			tabs.insertBefore(newTab, defaultTab);

			tabSpan.innerHTML = "✕";
			newTab.appendChild(tabSpan);
			tabSpan.classList.add("removeTab");

			defaultDiv.appendChild(newContent);
			newContent.innerHTML = note.value;
			newContent.classList.add("content", "item", "active");

			tabsArr.push(newTab);
			contentArr.push(newContent);
		}

		foldPopup();
	};

Перед закрывающей скобкой else мы добавляем новую созданную вкладку + контент в соответствующие массивы.

Теперь код на удаление вкладки + контента по клику

//Remove tab
	document.getElementsByClassName("removeTabs").onclick = function removeTab(tabsArr, contentArr) {
     return function() {
        tabsArr.forEach(function(el) {
           		el.parentNode && el.parentNode.removeChild(el);
        	 });
    	 }

    	 contentArr.forEach(function(el) {
           		el.parentNode && el.parentNode.removeChild(el);
        	 });
    	 };

Проблема: такой код не работает, консоль не выводит ошибку.
Прошу помочь разобраться.

Ссылка на JS Bin

[Vlasenko Fedor]

getElementsByClassName возвращает коллекцию а не элемент

[Alexander Belov]

Poznakomlus,
По моей ситуации мне не нужно знать конкретный элемент. Т.к. возвращается массив, клик должен срабатывать на любом из его элементов.

[рони]

getElementsByClassName("removeTabs").onclick

у коллекции нет клика!!!

[Alexander Belov]

Ок, перебираем массив при клике. Но это не меняет ситуацию - по-прежнему не работает ожидаемо и не выдаёт консоль ошибку.

//Remove tab
	var x = document.getElementsByClassName("removeTab");

	for (var i = 0, max = x.length; i < max; i += 1) {

		x[i].onclick = function removeTab(tabsArr, contentArr) {

	    	return function() {

	        tabsArr.forEach(function(el) {

	           		el.parentNode && el.parentNode.removeChild(el);

	        	 });
    	 }

    	 contentArr.forEach(function(el) {

           		el.parentNode && el.parentNode.removeChild(el);

        	 });
    	 };
	}

[рони]

Alexander Belov,
вам же показали решение (пост 11), чем неустроило?

[Alexander Belov]

рони,
Всё устроило. Ещё раз благодарю!
Добавлял eventListener просто не при создании, а отдельно, рядом с функцией потом на удаление. Потому выдавало ошибку. Всё отлично работает.

[Alexander Belov]

Снова я со своими табами.
Теперь возникла необходимость добавить функционал назначения active tab и active div (таб + контент) после удаления узла таб + контент при помощи функции, предоставленной Рони.
Вот слушатель и функция:

tabSpan.addEventListener("click", removeTab([newTab, newContent]));

	//Remove tab
	function removeTab(nodeArr) {
	    return function() {


	        nodeArr.forEach(function(el) {

	           el.parentNode && el.parentNode.removeChild(el);
	      
	        });

	        console.log(tabs.firstChild);
	    };
	 }

консолью пытаюсь вывести firstChild от

<ul id="tabs">

			<li id="defaultTab" class="tab default">
					<span>+</span>
			</li>


		</ul><!--Tabs ul End-->

		<div id="defaultDiv" class="content default">
			
		</div>

Default - это таб, выполняющий функцию кнопки-добавления нового таба и контента. Новый контент записывается внутрь defaultDiv.

Т.е. при удалении узла таб + контент должно ничего не произойти, если у них не было класса active, а если такой класс был, то мы его у этой связки удаляем и назначаем "первым детям" для ul#tabs и div#defaultDiv, если такие дети существуют (если были ещё табы до удаления "активного" таба), если нет, то ничего не происходит.

Законсоленный "firstChild" при наличии созданного уже до этого таба выдаёт странную картину (см.рисунок). Как-будто его нет вовсе.

Почему так? И как тогда реализовать такую функцию в моём случае? Подскажите, пожалуйста.

Актуальный JS Bin