Как удалить блок HTML по нажатию на кнопку?

Question

[Ler Den]

По нажатию на кнопку "add another options" отрисовывается еще один блок с аналогичными полями. У всех последующих блоков есть кнопка для удаления блока. Но она работает странно. Если кнопка прописана в самом файле html, то блок скрывается, а вот в данном случае, когда кнопка добавляется через джс, то она не работает. По нажатию на нее срабатывает стандартное поведение кнопки, как я понимаю, хотя я отменил стандартное поведение через preventDefault()

$('.button-delete-row').click(function(e) {
    // body...
    e.preventDefault();
    $(this).closest('.select-row').hide();

  });

https://jsfiddle.net/gtn8sgjp/

UPD на реальной странице этот блок с полями хранится в модальном окне. После нажатия на красную кнопку модальное окно просто закрывается.

Comments

[OVK2015]

А вы к создаваемым кнопкам обработчик прицепить не забыли?

[Ler Den]

OVK2015: та вроде не забыл. Код кнопки
<button class="button-delete-row">x</button>
а сам обработчик, который срабатывает на клик по классу "button-delete-row", выше

[OVK2015]

Evgeniy: Это все здорово, конечно. Где там bind этого обработчика к создаваемой кнопке?

Answer 1

[Денис]

https://jsfiddle.net/gtn8sgjp/1/

$(document).on('click', '.button-delete-row', function(e) {
    // body...
    e.preventDefault();
    $(this).closest('.select-row').hide();
});

Вместо document, желательно указать ближайший родительский элемент, который был сразу при загрузке DOM.

Comments

[Ler Den]

Спасибо большое. Интересно, что если кнопка была изначально в html, а не создавалась через JS, то удаление работало нормально. Уже не первый раз спотыкаюсь на .click() и .on("click"), хотя разницы между ними так и не уловил

[Денис]

Evgeniy метод on() включает в себя, кроме всего прочего и функционал метода delegate() и уже удаленного метода .live(). Это позволяет устанавливать делегированную обработку событий. Проще говоря, это установка обработчика событий не на сам целевой элемент, а на его родительский.

Answer 2

[lega]

jsfiddle.net/lega911/u6yomotr