Как удалить динамически созданный элемент по клику на него?

Question

[alexeeey_kuznetsov]

Сразу уточню: я посмотрел такие же по сути вопросы и всё это я делал изначально, но не получилось.
https://codepen.io/alexeeey_kuznetsov/pen/YRrGJo
При клике на кнопку создается картинку и кнопка "Удалить". При клике на свежесозданную кнопку удаляется картинка и сама кнопка "Удалить".
Разобрался и с сутью отличия .click() и .on('click'), но именно после создания кнопки с картинкой - никакие манипуляции с ними не проходят. По клику ничего не получается. Жду ответа.
Заранее спасибо за помощь!

Answer 1

[Rsa97]

https://codepen.io/anon/pen/BGwLgL

Comments

[alexeeey_kuznetsov]

Спасибо!

Answer 2

[Stalker_RED]

Разобрался и с сутью отличия .click() и .on('click')

А не расскажите в чем суть?
А то в документации пишут, что это одно и то-же.

This method is a shortcut for .on( "click", handler ) in the first two variations, and .trigger( "click" ) in the third.

Comments

[alexeeey_kuznetsov]

"Метод .click() не работает с динамически добавленными элементами. Поэтому событие вешается только на тот элемент, который уже был на странице. Навешивайте обработчик события методом .on() на элемент html. Это проделегирует обработчик на все элементы, указанные в качестве контекста, включая те, что были созданы динамически."
С похожего вопроса. Я обучаюсь по урокам курса jquery - суть передана точно.

[Stalker_RED]

alexeeey_kuznetsov, я понимаю о чем вы, но в вашем пересказе есть неточности.

$('button').click(function(){
  // не работает с динамически добавленными элементами
  // которые были добавлены позже, чем объявлен этот обработчик
})
$('button').on('click', function(){
  // ТОЖЕ не работает с динамически добавленными элементами
  // которые были добавлены позже, чем объявлен этот обработчик
})

Для деолегирования нужно вешать обработчик на какой-то родительский элемент, который уже существует, ну или на window, например.

[alexeeey_kuznetsov]

Stalker_RED, Да, ответ, помеченный решением мне это помог понять.