JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

Код кнопки (возможно вам нужно будет изменить CSS):
 

  <div>
    <div class="pane">
      <h3>Лошадь</h3>
      <p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
       <button class="remove-button">[x]</button>
    </div>
    <div class="pane">
      <h3>Осёл</h3>
      <p>Домашний осёл (лат. Equus asinus asinus), или ишак, — одомашненный подвид дикого осла (Equus asinus), сыгравший важную историческую роль в развитии хозяйства и культуры человека и по-прежнему широко в хозяйстве многих развивающихся стран.</p>
       <button class="remove-button">[x]</button>
    </div>
    <div class="pane">
      <h3>Кошка</h3>
      <p>Кошка, или домашняя кошка (лат. Felis silvestris catus), — домашнее животное, одно из наиболее популярных(наряду с собакой) «животных-компаньонов». Являясь одиночным охотником на грызунов и других мелких животных, кошка — социальное животное, использующее для общения широкий диапазон звуковых сигналов.</p>
       <button class="remove-button">[x]</button>
    </div>
  </div>

CSS

body {
  margin: 10px auto;
  width: 470px;
}

h3 {
  margin: 0;
  padding-bottom: .3em;
  font-size: 1.1em;
}

p {
  margin: 0;
  padding: 0 0 .5em;
}

.pane {
  background: #edf5e1;
  padding: 10px 20px 10px;
  border-top: solid 2px #c4df9b;
}

.remove-button {
  font-size: 110%;
  color: darkred;
  right: 10px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
}

JavaScript

let panes = document.querySelectorAll('.pane');
for (let pane of panes) {
  pane.querySelector('.remove-button').addEventListener('click', onPaneClick)
}

function onPaneClick(evt){
  evt.target.closest('.pane').remove()
}