Как задать или удалить класс конкретному дочернему элементу?

Question

[DZHAMBUALT]

У меня есть несколько элементов container в которых есть element-1, element-2, element-3. Как добавить element-3 класс active, если по его родительскому элементу container произошёл клик?

<div class="container">
      <div class="element-1">1</div>
      <div class="element-2">2</div>
      <div class="element-3">3</div>
    </div>

    <div class="container">
      <div class="element-1">1</div>
      <div class="element-2">2</div>
      <div class="element-3">3</div>
    </div>

    <div class="container">
      <div class="element-1">1</div>
      <div class="element-2">2</div>
      <div class="element-3">3</div>
    </div>

.container {
  width: 100px;
  height: 100px;
  background-color: aqua;
  margin: 0 auto 100px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: wrap column;
}
.element-1,
.element-2,
.element-3 {
  font-size: 20px;
  color: white;
  display: none;
}

.active {
  display: block;
}

const containers = document.querySelectorAll(".container");

containers.forEach((el) => {
  el.addEventListener("click", () => {});
});

Comments

[Ankhena]

el.querySelector(".element-3").classList.add("active");

[imko]

Ябстилямивыкрутился ( ͡° ͜ʖ ͡°) на контейнер клик - контейнеру класс, а элементу стили с селектором от "классного контейнера

Answer 1

[Сергей delphinpro]

containers.forEach((el) => {
  el.addEventListener("click", e => {
    e.currentTarget.querySelector('.element-3').classList.add('active');
  });
});