Question

I am trying to accomplish delete in page which is filled with data by ajax call.
my page has this before data is loaded:

<span id="ShowSelectedCategories"></span>

and after ajax call i fill with below info:

function(data){
    $('#ShowSelectedCategories').prepend('<a href="" id="'+b.SelectedCategoriesID+'" class="DeleteCat"> x <span style="color:red">' + data +'</span> </a>&nbsp ');
}

and finally after click i want to remove clicked element but it doesn’t work.

$(function(){

    $("#ShowSelectedCategories").click(function(e){
    e.target.outerHTML //this is the part i want to remove after click

e.preventDefault();
    })

I have tried $(".DeleteCat).click() but this gave error because elements with that class was created dynamically.

Your help is appreciated

Answer 1

$('#ShowSelectedCategories').on('click', '.DeleteCat', function(e){
    $(this).remove();
    e.preventDefault();
});

http://jsfiddle.net/Dj5NQ/