спрятать сообщенеие

by Aleksandr Tomashov

HTML

<div class="pane">
  <h3>Лошадь</h3>
  <p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
  <button class="remove-button">[x]</button>
</div>
<div class="pane">
  <h3>Осёл</h3>
  <p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
  <button class="remove-button">[x]</button>
</div>
<div class="pane">
  <h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
  <p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
    тёлками.
  </p>
  <button class="remove-button">[x]</button>
</div>

CSS

.pane {
  position: relative;
  background-color: aquamarine;
  border-top: 3px solid forestgreen;
  width: 700px;
}

p {
  margin-bottom: 0;
}

.remove-button {
  color: red;
  font-size: 1.2em;
  position: absolute;
  top: 15px;
  right: 5px;
}

JavaScript

'use strict'

var buttons = document.querySelectorAll('.remove-button');

for (var i = 0; i < buttons.length; i++) {
  var button = buttons[i];

  button.onclick = function() {
    this.parentNode.remove();
  };
}