Remove closest uploaded image

Question

I am searching for hours now for this simple answer. I have 5 upload fields for images and I want to make a delete button for each uploaded image. If you click on this button the closest image needs to be removed.

I know there are lots of questions on Stack about this item, but cannot find the right one. I have tried closest(), find(), closest() with children() but cannot make it work.

Can someone give me the right hint?

I made a Jsfiddle: http://jsfiddle.net/4SHUG/

This is my html:

<div class="stn_uploader">
    <p class="delete">Delete</p>
    <img src="http://3.bp.blogspot.com/-hME1fzYTKkc/Tl157uRJ3gI/AAAAAAAAIzQ/OnqAvShZaLA/s1600/white-clouds.jpg" width="300"/>

</div>

<div class="stn_uploader">
    <p class="delete">Delete</p>
    <img src="http://3.bp.blogspot.com/-hME1fzYTKkc/Tl157uRJ3gI/AAAAAAAAIzQ/OnqAvShZaLA/s1600/white-clouds.jpg" width="300"/>

</div>

<div class="stn_uploader">
    <p class="delete">Delete</p>
    <img src="http://3.bp.blogspot.com/-hME1fzYTKkc/Tl157uRJ3gI/AAAAAAAAIzQ/OnqAvShZaLA/s1600/white-clouds.jpg" width="300"/>

</div>

This is my jquery:

$(document).ready(function() {

    $('.stn_uploader .delete').click(function() {
          $(this).closest('.img').remove();  
    });

});

Answer 1

Image is sibling thus closest() will not work. You can use next()

Use

$(document).ready(function() {
    $('.stn_uploader .delete').click(function() {
          $(this).next('img').remove();  
    });
});

OR

$(document).ready(function() {
    $('.stn_uploader .delete').click(function() {
          $(this).closest('.stn_uploader').find('img').remove();  
    });
});

Answer 2

img is a sibling, closest looks at itself and its ancestors. The second issue is your selecotr is wrong, you are looking for a class "img" and not an element "img"

You can use next()

$(this).next().remove();

or siblings()

$(this).siblings("img").remove();

or if you want to delete the entire block, closest would work.

$(this).closest('.stn_uploader').remove(); 

Answer 3

closest traverse up the DOM tree and get the first matched ancestor.

In your case, img is the next element of your paragraph. So you need to use next() or siblings():

$('.stn_uploader .delete').click(function() {
      $(this).next().remove();  // or $(this).siblings('.img').remove();
});

Btw, your images don't have any class named as img, if you want to target <img> tag, you can use:

$('.stn_uploader .delete').click(function() {
    $(this).siblings('img').remove();
});

Answer 4

Why are you using (".img").There are no class in img tag.Try This code.

$(document).ready(function() {

    $('.stn_uploader .delete').click(function() {

          $(this).next('img').remove();  
    });

});

OR

 $(document).ready(function() {

        $('.stn_uploader .delete').click(function() {

              $(this).parent('.stn_uploader').remove();  
        });

    });

Answer 5

You're not far away ;)

$('.stn_uploader .delete').click(function() {
    $(this).closest('.img').remove();  
});

First, you're using a class .img instead of the element node name img.

Then, img is a sibling not a parent element, so if you wanted to find it from .delete you should use next :

$('.stn_uploader .delete').click(function() {
    $(this).next('img').remove();  
});

I think you should also look at this option to remove the whole container :

$('.stn_uploader .delete').click(function() {
      $(this).parent().remove();  
});