Как использовать JavaScript для добавления класса к одному элементу и удаления класса у других элементов?

Чтобы реализовать добавление класса "active" к выбранному элементу и удаление этого класса у остальных элементов в JavaScript, вы можете использовать следующий подход:

1. Прикрепите обработчик событий `click` ко всем элементам списка.
2. При возникновении события `click`, пройдитесь по всем элементам списка и удалите класс "active".
3. Добавьте класс "active" к элементу, по которому произошло нажатие.

Пример кода может выглядеть следующим образом:

HTML:
```html
<ul id="myList">
  <li class="item">Элемент 1</li>
  <li class="item">Элемент 2</li>
  <li class="item">Элемент 3</li>
  <!-- Продолжение списка -->
</ul>
```

CSS:
```css
.active {
  // Добавьте стили, которые должен иметь активный элемент
  background-color: #f0f0f0;
  /* Прочие стили */
}
```

JavaScript:
```javascript
// Сначала получим все элементы списка по классу
const items = document.querySelectorAll('.item');

// Функция, которая будет обрабатывать клик по элементу списка
function handleClick(event) {
  // Переберем все элементы и удалим класс 'active'
  items.forEach((item) => {
    item.classList.remove('active');
  });

  // Добавим класс 'active' к текущему элементу
  const currentItem = event.currentTarget;
  currentItem.classList.add('active');
}

// Навешаем обработчик событий на каждый элемент списка
items.forEach((item) => {
  item.addEventListener('click', handleClick);
});
```

Теперь, когда пользователь кликает на элемент списка, все остальные элементы потеряют класс "active", а кликнутый элемент получит этот класс.

Обратите внимание, что при использовании `currentTarget`, мы получаем элемент, к которому привязан обработчик, что гарантирует правильность работы даже если внутри элементов списка есть дополнительная разметка.