Как при клике на элемент добавить ему класс, а у всех соседей удалить?

Question

[Олег Морев]

Как при клике удалять класс selected у соседей кликнутого элемента?
https://jsfiddle.net/9Lufhat3/163/

P.S JQ не предлагать, про .siblings() в курсе.

Answer 1

[0xD34F]

Где элементы находятся, что за элементы, и какой класс будем им добавлять/убирать:

const container = document.querySelector('nav');
const itemSelector = '.sidebar-item';
const activeClass = 'selected';

Вариант раз, делегируем обработку клика контейнеру. При клике ищем элемент с нужным классом, снимаем класс, устанавливаем класс кликнутому:

container.addEventListener('click', e => {
  const item = e.target.closest(itemSelector);
  if (item) {
    const activeItem = e.currentTarget.querySelector(`.${activeClass}`);
    if (activeItem) {
      activeItem.classList.remove(activeClass);
    }

    item.classList.add(activeClass);
  }
});

Вариант два, тоже с делегированием. Перебираем все элементы, переключаем класс в зависимости от того, является ли текущий элемент кликнутым:

container.addEventListener('click', function({ target: t }) {
  if (t = t.closest(itemSelector)) {
    for (const n of this.querySelectorAll(itemSelector)) {
      n.classList.toggle(activeClass, n === t);
    }
  }
});

Вариант три, назначаем обработчик клика каждому элементу индивидуально, перебираем элементы аналогично предыдущему варианту:

const items = container.querySelectorAll(itemSelector);
const onClick = e => items.forEach(n => n.classList.toggle(activeClass, n === e.currentTarget));
items.forEach(n => n.addEventListener('click', onClick));

Вариант четыре, обработчик клика назначается как и в предыдущем, но, как и в первом варианте, будем убирать класс у активного элемента и добавлять кликнутому:

container.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, function(e) {
  this[0] && this[0].classList.remove(activeClass);
  e.currentTarget.classList.add(activeClass);
}.bind(container.getElementsByClassName(activeClass)));

Answer 2

[Антон Спирин]

Вариант без делегирования.

Answer 3

[coderisimo]

по клику на кнопке

$('.sidebar-item').removeClass('selected');
$(this).addClass('selected');

БЕЗ jQ ваш код (идея та же):

var menuItems = document.getElementsByClassName("sidebar-item");
  for (var i = 0; i < menuItems.length; i++) {
            menuItems[i].addEventListener("click", function() { 
            var x = document.getElementsByClassName("sidebar-item");
            Array.prototype.forEach.call(x, function(el) {
            el.classList.remove("selected");
});
           this.classList.add('selected');
         });
  }

Answer 4

[Anton fon Faust]

Например так: https://jsfiddle.net/anton4ept/3gsgyxon/