删除动态生成的元素

Question

I have implemented a user-generated keyword list for a project I'm working on, using jQueryUI autocomplete to suggest existing keywords.

On selecting the autocomplete suggestion, the returned string is added to the html of a div , as a child div.

I would like to add a removal function whereby the user can remove the child div if erroneously entered.

I've tried multiple suggested answers from Stackoverflow and elsewhere, but can't seem to get it working.

I've created a fiddle containing the pertinent elements.

The most logical solution to me was:

$('.keyword-entry').click(function(e){
    var id = $(this).closest('div').prop('id');
    $('#'+id).remove();
}

Though it would appear this doesn't work.

Whilst a solution to the problem would be very much appreciated to save my dwindling supply of coffee from running out this evening, I would also appreciate a rundown as to why I'm going wrong.

Thanks in advance.

Answer 1

Event delegation.

It's basically that you're attempting to attach an event to an DOM element that doesn't exist in the DOM at the time of load. Rewrite the .click() handler too:

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

Fiddle: http://jsfiddle.net/6bBU4/

What it's doing is that, it's attaching the .click() event to the document (The top most DOM element) will travel down to find any new .trashYes , thus successfully executing the .remove() . This doesn't have to be bound to the document but to any DOM element within the document as well at load.

Answer 2

No need to get the id and then try and find it again, just do this...

$('<div id="'+id+'" class="keyword-entry" style="z-index:0">'+ui.item.value+'   <--I want to remove this</div>')
    .appendTo($('#keyword-list'))
    .click(function(e){
        $(this).remove();
    });

when adding the keyword entry