ajax从成功视图中删除div

I have an ajax image uploader that I am currently trying to do a delete link for, I have the delete script working, but on success I want it to also remove the div and replace with "Image Deleted" text, but I am a little confused on how to remove a div where the id will always be different (set from a var).

$(function(){
    $(document).on('click','.trash',function(){
        var image_id= $(this).attr('id');
        $.ajax({
            type:'POST',
            url:'/includes/delete_image.php',
            data:{'image_id':image_id},
            success: function(data){
                 if(data=="YES"){
                   $('#image_id').remove()
                 }else{
                        alert("can't delete the row")
                 }
             }

            });
        });
});

That's the code, so on data=="YES" I want this:

<div id="image_id">
   <img src=\"/uploads/articles/article_images/image_name" class='imgList'><br />
BBCode: <input type="text" class="form-control" value="[img]http://www.prxa.info/uploads/articles/article_images/{$image_name}[/img]\" /><br />";
    <a href="#" id="image_id" class="trash">Delete Image</a>
</div>

To be deleted, where "image_id" will be a number set as "image_id" in the ajax code, any pointers? I am doing it horribly wrong right now heh.

"image_id" is different everytime of course.

you have more than 1 element with the same id, so to get the div you could try:

$("div[id='image_id']").remove();

have you tried to change this:

$('#image_id').remove();

to this:

$('#'+image_id).remove();

Assuming the HTML div is repeating, you won't want them to all have the same id. Change this to a class of image, or something else meaningful to your css.

You do this two ways. Either set a data attribute on the div, or use the parent jquery function to get the parent div of the link you clicked.

Setting the data attribute is probably considered better practice. Add the attribute data-image-id, and then you can select the div based on that attribute's value, and then remove it.

<div data-image-id="[your image id]">

Then you can then select the div based on the attribute as explained in the jquery docs

use this

$("#"+image_id).remove();

instead of

$('#image_id').remove();

As it seems you have the image_id as a variable. So you should be able to use in your success callback.

$('#'+image_id).html('image was deleted successfully...');

You can give the id's different prefixes like

'div_' + image_id and 'img_' + image_id