Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.04.2016, 10:23
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

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

Прошу помочь разобраться с ситуацией:
у меня есть 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, 10.04.2016 в 10:30.
Ответить с цитированием
  #2 (permalink)  
Старый 10.04.2016, 10:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Alexander Belov,
выберите из элеметов
Сообщение от Alexander Belov
li с классом tab active
нужный
Ответить с цитированием
  #3 (permalink)  
Старый 10.04.2016, 10:57
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

рони,
Так они вообще не должны по идее присутствовать несколько сразу. Только 1 элемент li с классом active должен быть.
activeTab = document.getElementsByClassName("tab active");


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

При клике на кнопку проверяю, есть ли такой элемент уже.
if(activeTab !== null) {
       activeTab.classList.remove("active")
    }


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

По этому раскладу в принципе не должна идти проверка среди нескольких элементов, такой элемент всегда один.
А по факту получается, что функция игнорирует это и класс active вообще не удаляется. Хотя сам элемент через console.log определяется.
Ответить с цитированием
  #4 (permalink)  
Старый 10.04.2016, 11:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Alexander Belov,
activeTab[0].classList.remove("active")

getElementsByClassName("
Ответить с цитированием
  #5 (permalink)  
Старый 10.04.2016, 11:36
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

рони,
Так пробовал тоже, всё равно функция выводит ошибку Cannot read property "remove" of undefined
Ответить с цитированием
  #6 (permalink)  
Старый 10.04.2016, 12:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Alexander Belov,
а так?
if(activeTab.length) {
       activeTab[0].classList.remove("active")
    }
Ответить с цитированием
  #7 (permalink)  
Старый 10.04.2016, 12:32
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

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

Можете объяснить, почему activeTab !== null не сработал?
Ответить с цитированием
  #8 (permalink)  
Старый 10.04.2016, 12:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Alexander Belov,
посмотрите что возвращает getElementsByClassName или прочитайте документацию на этот метод.
Ответить с цитированием
  #9 (permalink)  
Старый 10.04.2016, 13:14
Аватар для Leon-on12
Аспирант
Отправить личное сообщение для Leon-on12 Посмотреть профиль Найти все сообщения от Leon-on12
 
Регистрация: 07.04.2015
Сообщений: 65

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

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


Всегда со всеми методами ElementSSS проверяйте указали ли вы ссылку на конкретный элемент.
Ответить с цитированием
  #10 (permalink)  
Старый 10.04.2016, 23:42
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

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

Но и так не работало.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
если hover то класс сверху Артем125 (X)HTML/CSS 15 22.11.2011 21:57
Как можно удалить динамически созданный элемент Арсений Элементы интерфейса 18 08.07.2010 12:56
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 13:31
можно ли, если да то как удалить строки из таблицы Avaria Я не знаю javascript 3 11.06.2009 03:03
Как сравнить класс, если их много!? Sc@M Events/DOM/Window 16 29.08.2008 12:47