Почему делегирование не работает?

125

16 ноября 2019, 03:00

var message = document.querySelector('#messages-container'); 
var buttons = document.querySelector('.remove-button'); 
 
message.onclick = function(event){ 
  var target = event.target; 
 
    if(target == 'button'){ 
    target.removeChild('button'); 
  } 
}

    <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>

Выбираем родительский контейнер var message = document.querySelector('#messages-container');
Переменной message вешаем обработчик события и присваиваем ей функцию где первой аргумент объект события
В переменную target присваиваем элемент на котором произошло событие его можно получить event.target
Идет условие если оно true идет удаление элемента
где у меня ошибка ?

Answer 1

Первое.

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>