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]/{$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.

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.

• javascript
• php
• jquery
• html
• ajax

Share Improve this question Follow edited Feb 10, 2014 at 11:31 NaughtySquid asked Feb 10, 2014 at 11:24 NaughtySquidNaughtySquid 2,09733 gold badges3232 silver badges4545 bronze badges 6

• Can we see some HTML? I'll try and write an answer anyway – Relequestual Commented Feb 10, 2014 at 11:26
• Sorry it was there but the code tag messed up, fixed it now. – NaughtySquid Commented Feb 10, 2014 at 11:26
• can you please your html code? so its easy to give an answer of your question. – Dhaval Bharadva Commented Feb 10, 2014 at 11:27
• Look up ^ I put it in properly ;) – NaughtySquid Commented Feb 10, 2014 at 11:27
• may I know what about {$image_id} .. – Moorthy GK Commented Feb 10, 2014 at 11:29

 |  Show 1 more ment

5 Answers 5

Sorted by: Reset to default 5

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();

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

use this

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

instead of

$('#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