Почему не исчезает блок?

Question

[Semmy_99]

Изучаю JS чистый. Подскажите пожалуйста что я делаю не так ?

При клике на крестик должен удаляться родительский блок в котором находится кнопка эта.

Если не сложно объясните ,где именно я ошибся и исправленный вариант .

Вот КОД

Answer 1

[Александр Опарин]

Проблема вот тут:
buttons.addEventListener('click',hide );

Событие вешать надо на отдельную кнопку, а не на все сразу

https://codepen.io/anon/pen/prppmg?editors=1011

Answer 2

[gleendo]

// Слушаем событие клика на всем контейнере.
document.querySelector("#messages-container").addEventListener("click", event => { // Делегирование...
  if (event.target.classList.contains("remove-button")) { // Если элемент на который кликнули внутри контейнера имеет класс remove-button 
    event.target.parentNode.remove(); // то удаляем родительский элемент кнопки
  }
}, false);

// Можно и так...
for (let button of document.querySelectorAll(".remove-button")) {
  button.addEventListener("click", event => {
    button.parentNode.remove();
  }, false);
}

// Ну или так...
document.querySelectorAll(".remove-button").forEach(button => button.addEventListener("click", () => button.parentNode.remove(), false));

Answer 3

[Igor Koch]

https://codepen.io/whata/pen/yoppWO?editors=1010