Удаление вновь созданных элементов в jquery?

Question

[Кодер Кодер]

Такая задачка. Есть ссылки, которые удаляются при нажатии на них при помощи jquery. Также есть кнопка, которая добавляет новые шаблонные ссылки через append. Феномен для меня в том, что ссылки созданные через кнопку не удаляются при клике на них. Что я мог пропустить? Ссылка на пример:
jsfiddle.net/1n8paxfo/95

Answer 1

[Steppp]

Используй делегирование!

Допиши в конце js, и будет тебе счастье) только счетчик поправить!

const ul = document.querySelector(`ul`);
  
  ul.addEventListener(`click`, (evt) => {
  let target = evt.target;
    if (target.className === `clk`) {
      target.closest(`li`).remove();
    }
  })

Comments

[Кодер Кодер]

Хм, Javascript.. Интересное решение. Но я все же хочу понять почему не работает мой код ;) Где ошибка? Что почитать?

[Steppp]

Кодер Кодер, твой код не работает, потому что ты сначало находишь все ссылки, и вешаешь на них обработчик клика! Но при нажатии на на "добавить ссылку", ссылка добавляется, но обработчик клика не вешается на ссылку! Тебе по новой надо вешать!

Читай делегирование ! Тоесть ты вешаешь клики не на ссылки, а на родителя, и в условии уже ищешь куда был клик! Если по ссылке, то удаляешь, если мимо, то мимо)))

[Кодер Кодер]

Steppp, То что надо! Спасибо.

Answer 2

[Влад]

Изменил в Вашем коде всего одну строчку с кликом на ссылку и все работает

$( document ).ready(function() {
// кнопка button добавляет новую ссылку по шаблону
	$('button').click(function(){
	$('ul').append('<li><a class="clk" href="#">ссылка</a></li>');
	});

	$('body').on('click', 'a',function(){ // Было  $('a').click(function(){
  
    var col = $("ul").children("li").length;
    
    $('span').html(col);// выводит кол-во li элеменотов
    
    if(col>0){  
    $(this).parent().remove(); } // пока есть ссылки, удаляем
    
    else {
    $('.links').html("Закончились"); } // когда нет ссылок..
    
    return false;
	});
  
});