Как удалить() дочерний элемент append() с помощью jQuery на странице?

Question

Базовый код HTML:

<div class="items"> 
    <div class="item"> 
     <span>item text</span> 
     <i class="fa fa-times" aria-hidden="true"></i> 
    </div> 
</div> 

Append код дочерний элемент (Jquery):

$('.items').append('<div class="item"><span>'+ text + '</span><i class="fa fa-times" aria-hidden="true"></i></div>'); 

удалить элемент кода (Jquery):

$('.items .item i').click(function(){ 
    $(this).parent().remove(); 
}); 

ребенка (пункт), который будет добавлен на основе HTML-код, этот ребенок будет удален. «Удалите код элемента». Но другие дети, которые нужно добавить. «Добавить дочерний элементный код» не удаляется!

, пожалуйста, руководство меня ...

Answer 1

Вы должны использовать event delegation, поскольку элемент, добавленный динамически иначе обработчик события не привязываться к динамически добавляемых элементов DOM.

$('.items').on('click','.item i',function(){ 
    $(this).parent().remove(); 
    // or $(this).closest('.item').remove(); 
}); 

Answer 2

обработчики событий, как мыши присваиваются всем текущих согласующих элементов. Поскольку будущих элементов не существует, он не назначает обработчик события. Все, что вам нужно сделать, - это повторно запустить функцию remove element каждый раз, когда вы добавляете новый элемент, чтобы назначить обработчик события этому элементу. Или, если вы хотите, чтобы быть чище добавить обработчик событий для конкретного нового элемента, как этого

$('<div class="item"><span>'+ text + '</span><i class="fa fa-times" aria-hidden="true"></i></div>').appendTo(".items").children("i").click(function(){ 
$(this).parent().remove(); 
}); 

Это было бы вместо текущей функции дописывания