2

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>

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

1 ответ 1

3

Первое.

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>

11
  • Третье Кто же так удаляет элементы? я :))))
    – Leks
    8 мар 2019 в 20:21
  • @Leks Ну и как? Успешно?
    – user176262
    8 мар 2019 в 20:22
  • Ну и как? Успешно? :(((((((
    – Leks
    8 мар 2019 в 20:23
  • @ Igor (target.classList.contains('remove-button') проверяет есть ли класс и возвращает true или false
    – Leks
    8 мар 2019 в 20:26
  • @Leks Спасибо, я знаю.
    – user176262
    8 мар 2019 в 20:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.