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

Answer 2

img是一个兄弟姐妹，最近看自己和它的祖先。第二个问题是你的选择是错的，你正在寻找一个“img”类而不是一个元素“img”

您可以使用next()

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

或siblings()

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

或者如果要删除整个块，则最近的块可以正常工作。

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

Answer 3

closest遍历DOM树并获得第一个匹配的祖先。

在您的情况下，img是您段落的下一个元素。因此，您需要使用next()或siblings()：

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

顺便说一句，您的图片没有任何名为img的类，如果您想定位<img>代码，可以使用：

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

Answer 4

你为什么用（“。img”）。img tag中没有类。试试这段代码。

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

你并不遥远;）

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

首先，您使用的是类.img而不是元素节点名img。

然后，img是一个兄弟，而不是父元素，所以如果你想从.delete找到它，你应该使用next：

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

我认为您还应该查看此选项以删除整个容器：

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

删除最近上传的图像

5 个答案: