Adding tag dynamically by jquery

Question

I use jquery to add tag dynamically, but I face some problems. I can remove the tags in original code, however, I can't remove the tag which is added by jquery.

Another question is how could I avoid adding duplicated tag (same value)? Many thanks!

<div id='searchTerm' class='searchTerm'>
    <span><b>U.S.A</b><a class="remove" href="#"></a></span>
    <span><b>H.K.</b><a class="remove" href="#"></a></span>
</div>

$('document').ready(function(){
    $('#addTag').click(function() {
        var html='';
        html += '<span><b>' + $("#newTag").val() + '</b><a class="remove" href="#"></a></span>';
        $('#searchTerm').append(html);
    });
    $('.remove').click(function() {
        $(this).parent().remove();
    });
});

Murali Murugesan · Accepted Answer · 2014-03-26 15:32:15Z

1

use on() for the tags added dynamically

$(document).on('click','.remove',function() {
    $(this).parent().remove();
});

answered Mar 26, 2014 at 15:32

Murali Murugesan

22.6k18 gold badges76 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Murali Murugesan Over a year ago

@Eric, .click() will simply apply the click event for the items found in DOM at the time of loading. They will not be invoked for dynamically added elements. However, with on() you can attach the click event at the document level but with a specific selectors.

LoveTW Over a year ago

But if I use $('.remove').on('click', function({$(this).parent().remove();}); to implement the event, the new tags could not be deleted. So the reason might be using $(document)?

Murali Murugesan Over a year ago

@Eric, basically $(document) you are asking a document to take care of listening for .remove selectors. In your code, you are asking the current .remove elements to take care. But they will not take care of the dynamic items

LoveTW Over a year ago

I got it! Thank you for kindly reply! Have a nice day :)

LoveTW Over a year ago

Do you have any suggestion about how to avoid adding duplicated tag?

|

Collectives™ on Stack Overflow

Adding tag dynamically by jquery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related