javascript - dynamically added class can't be called

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

Try $(e.target).remove(),

$("#ShowSelectedCategories").click(function(e){
         $(e.target).remove();    
         e.preventDefault();
});

If you want to delete element with class DeleteCat within span with id ShowSelectedCategories then you can do it like this,

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