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

Question

[Олег Морев]

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

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

Answer 1

[0xD34F]

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

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

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

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

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

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

container.addEventListener('click', e => {
  const item = e.target.closest(itemSelector);
  if (item) {
    for (const n of e.currentTarget.querySelectorAll(itemSelector)) {
      n.classList.toggle(className, n === item);
    }
  }
});

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

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

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/