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