Как при нажатии на один объект в ul удалить классы у остальных объектов?

Question

[Шамиль Хайрулаев]

Есть навбар, в котором несколько элементов. Мне нужно, чтобы при нажатии на одного из них на нажатом появлялся класс active (это я уже сделал), а у остальных он удалялся.

Вот мой код

const navigation = document.querySelector('.header__navigation');

navigation.addEventListener('click', (event) => {
   const target = event.target;

   // navigation.removeClass('active');
   target.classList.add('active');
});

Answer 1

[Александр]

Вариант 1:

const navigation = document.querySelector('.header__navigation');

navigation.addEventListener('click', (event) => {
    const activeElements = navigation.querySelectorAll('.active');
    for (const activeElement of activeElements) {
        activeElement.classList.remove('active');
    }

    event.target.classList.add('active');
});

Вариант 2:

const navigation = document.querySelector('.header__navigation');
const items = navigation.querySelectorAll('YOUR_SELECTOR'); // Элементы, у которых должен быть класс active

for (const item of items) {
    item.addEventListener('click', () => {
        for (const item of items) {
            item.classList.remove('active');
        }

        item.classList.add('active');
    });
}