Где элементы находятся, что за элементы, и какой класс будем им добавлять/убирать:
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));
