MONJE MONJE - 2 years ago 115
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 ...

Answer Source

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();
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download