MONJE MONJE - 4 months ago 17x
jQuery Question

How to remove() the append() child element with Using jQuery on the page?

Base html code:

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

append child element code (jQuery):

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

remove element code (jQuery):

$('.items .item i').click(function(){

Child (item) to be added based HTML Code, This Child will be deleted By "remove element code".
But Other children to be added By "append child element code" not deleted!

please guide me ...


You need to use event delegation since item added dynamically otherwise event handler not get attached to the dynamically added dom elements.

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