javascript - 删除最近上传的图像

Question

我现在正在寻找几个小时来寻找这个简单的答案。我有 5 个图片上传字段，我想为每个上传的图片制作一个删除按钮。如果单击此按钮，则需要删除最接近的图像。

我知道 Stack 上有很多关于此项目的问题，但找不到合适的问题。我尝试了 closest()、find()、closest() 和 children() 但无法成功工作。

谁能给我正确的提示？

我做了一个 Jsfiddle:http://jsfiddle.net/4SHUG/

这是我的 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>

这是我的 jquery:

$(document).ready(function() {

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

});

Answer 1

图像是兄弟图像，因此 closest() 将不起作用。您可以使用 next()

使用

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

或

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