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

Как добавить класс `active` к элементу `element-3`, если произошел клик на родительском элементе `container`?
  • 25 сентября 2023 г. 17:27
Ответы на вопрос 3
Чтобы добавить или удалить класс у определенного дочернего элемента, можно использовать JavaScript. Вот пример решения для вашей задачи:

HTML:
```html
<div id="container">
  <div class="element" id="element-1">Элемент 1</div>
  <div class="element" id="element-2">Элемент 2</div>
  <div class="element" id="element-3">Элемент 3</div>
</div>
```

JavaScript:
```javascript
const container = document.getElementById('container');
const element3 = document.getElementById('element-3');

container.addEventListener('click', function(event) {
  // Проверяем, что клик произошел на родительском элементе container
  if (event.target === this) {
    // Добавляем класс active к элементу element-3
    element3.classList.add('active');
  }
});
```

В данном примере мы используем метод `addEventListener` для родительского элемента `container`. В обработчике события `click` мы проверяем, что клик произошел именно на родительском элементе, а не на его дочерних элементах. Если условие выполняется, мы добавляем класс `active` к элементу `element-3` с помощью метода `classList.add('active')`.

Если вы хотите удалить класс `active` вместо его добавления, вы можете использовать метод `classList.remove('active')` вместо `classList.add('active')`.
containers.forEach((el) => {
  el.addEventListener("click", (e) => {
    const element3 = e.currentTarget.querySelector('.element-3');
    element3.classList.add('active');
  });
}); 
 containers.forEach((el) => {
  el.addEventListener("click", (e) => {
    const element3 = e.currentTarget.querySelector('.element-3');
    element3.classList.add('active');
  });
});
Похожие вопросы