アップロードした画像を削除します

Question

画像が表示されるたびに、どのように赤い "X"が表示されるかを知りたいと思います。赤い "X"は、ユーザーが選択した画像を削除するためのもので、各画像の赤いXになります。今はXがコンテナの上に座っているだけで、Xをクリックするとすべての画像が消えて、私は個々の画像を削除したいとは思いません。どうすればこれを可能にすることができますか？ここに私が持っているものがあります。

<div id="fotos" class="bananas"><img class="modal-content" id="imgdisplay" /></div> 



<script> 
$(".container5").on("dblclick", ".imgKLIK5", function() { 

    var self = $(this); 

    $(self).remove(); 
    $('#file1').val(""); 
}); 

var $btn = $("#imgdisplay"); 
$btn.click(function() { 
    $("#fotos img:last-child").remove() 
    $btn.hide(); 
}); 
</script> 

Answer 1

あなたが包まれていると仮定すると、あなたのお.closest('.wrapper')の代わり.parent().find()を使用することができますwrapperクラスを持つ親div内部div.bananas。

$('.bananas').click(function(e) { 
 
    $(this).closest(".wrapper").remove(); 
 
});

img { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.wrapper { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div id="fotos" class="bananas">X 
 
    <img class="modal-content" src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" id="imgdisplay" /> 
 
    </div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div id="fotos1" class="bananas">X 
 
    <img class="modal-content" src="http://i.telegraph.co.uk/multimedia/archive/03598/lightning-10_3598416k.jpg" id="imgdisplay1" /> 
 
    </div> 
 
</div>