Как снять class при клике на другой элемент?

Question

[Максим]

Есть блок внутри другого
При клике я смог присвоить class а вот снять с предыдущего не получается
Не могу допетрить как сделать e.target в querySelectorAll и так же что бы можно было снимать class кликая на него самого
Как сделать что бы при click на другой блок снимался class с прошлого ?

Answer 1

[galaxy]

Снимай со всех, делов-то.

Comments

[Максим]

покажите - отмечу решением без проблем

[galaxy]

Не знаю, видно ли на codepen, вот так:

for(let i = 0; i < icon.length; i++){
  icon[i].onclick = e => {
    for(let j = 0; j < icon.length; j++) icon[j].classList.remove("active");
    icon[i].classList.toggle("active");
  }
}

[Максим]

galaxy, работает - а вот как снять class при клике на него ? как сделать типа e.target ?

[galaxy]

e.target из другой оперы, это про event bubbling
Другой вариант - сохранять в переменную активный элемент и его деактивировать, типа такого:

var last;
for(let i = 0; i < icon.length; i++){
  icon[i].onclick = e => {
    if (last) last.classList.remove("active");
    icon[i].classList.toggle("active");
    last = icon[i].classList.contains("active") ? icon[i] : null;
  }
}

[Максим]

galaxy, не работает

[galaxy]

Работает вроде (проверил на codepen)

[Максим]

galaxy, кликаю class остаётся - скинь полную версию вот покажу что не работает : https://cloud.mail.ru/public/2hrp/5GuyEjeG4

[galaxy]

Да, понял.
Можно так исправить:

if (last && last != icon[i]) last.classList.remove("active");

[Максим]

galaxy, извени - не было дома не мог отметить решением - спасибо - вот щас шикарно

[Максим]

galaxy, и кстати я даже не для себя спрашивал : https://ru.stackoverflow.com/q/1135508/308951 указал источник