Первое.
var buttons = document.querySelector('.remove-button');
querySelector
возвращает первый элемент, соответствующий селектору. У Вас таких кнопок много, нужно использовать querySelectorAll
.
Второе.
if(target == 'button'){
Вы сравниваете элемент DOM-a со строкой. Естественно, они не равны.
Третье.
target.removeChild('button');
Кто же так удаляет элементы?
document.querySelector('#messages-container').onclick = function(event) {
var target = event.target;
if(target.classList.contains('remove-button')) {
this.removeChild(target.parentNode);
}
};
<div id="messages-container">
<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>
</div>