Как по клику добавить класс?

Question

[Дмитрий]

На странице есть блок комментарий, по нажатию на кнопку ответить нужно показать форму, где будет вводиться ответ, если форма показана и пользователь нажал на другом комментарии кнопку ответить, активную форму нужно скрыть и показать в другом месте. Как это можно сделать?

<div class="comment">
  <div class="comment-item">
    <div class="comment-item__text">Комментарий</div>
    <div class="comment-item__reply">Ответить</div>
    <div class="comment-item__form">
      <form action="">
        <textarea name="" id="" cols="30" rows="5" class="" placeholder="Ваш комментарий"></textarea>
      </form>
    </div>
  </div>
  <hr>
  <div class="comment-item">
    <div class="comment-item__text">Комментарий</div>
    <div class="comment-item__reply">Ответить</div>
    <div class="comment-item__form">
      <form action="">
        <textarea name="" id="" cols="30" rows="5" class="" placeholder="Ваш комментарий"></textarea>
      </form>
    </div>
  </div>
</div>

.comment {
  width: 100%;
}

.comment-item {
  max-width: 350px;
  margin: 0 auto;
  margin-bottom: 50px;
}

.comment-item__text {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
}

.comment-item__reply {
  margin-bottom: 15px;
  cursor: pointer;
}

.comment-item__form {
  display: none;
}

Answer 1

[0xD34F]

.comment-item.active .comment-item__form {
  display: block;
}

const itemSelector = '.comment-item';
const buttonSelector = `${itemSelector} .comment-item__reply`;
const activeClass = 'active';

document.addEventListener('click', function({ target: t }) {
  if (t = t.closest(buttonSelector)?.closest(itemSelector)) {
    (this[0] !== t) && this[0]?.classList.remove(activeClass);
    (this[0] = t).classList.toggle(activeClass);
  }
}.bind([ null ]));

// или

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, function() {
  let item = this;
  while (!(item = item.parentNode).matches(itemSelector)) ;
  document.querySelectorAll(itemSelector).forEach(n => {
    n.classList[n === item ? 'toggle' : 'remove'](activeClass);
  });
});

Comments

[Дмитрий]

Спасибо