如何删除上传的图片？

Question

我的html代码是这样的：

<input type='file' multiple/>
<?php
    for($i=0;$i<5; $i++) {
?>
    <div class="img-container" id="box<?php echo $i ?>">
        <button  style="display: none;" type="submit" class="btn btn-danger show-button">
            <i class="glyphicon glyphicon-trash"></i>
        </button>
    </div>
<?php
    }
?>

我的JavaScript代码是这样的：

    $(function () {
        $(":file").change(function () {
            var noOfFiles = this.files.length;
            for(var i=0; i < noOfFiles; i++) {        
                var reader = new FileReader();
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[i]);
            }        
        });
    });

    function imageIsLoaded(e) {
        var imgTmpl = '<img height="142" width="162" src='+e.target.result+'>';
        var IsImgAdded=false;
        $('.img-container').each(function(){
            if($(this).find('img').length==0 && IsImgAdded==false){
                $(this).append(imgTmpl);
                IsImgAdded=true;
                $(this).find('.show-button').show();
            }
        });     
    };

    $(".show-button").click(function(){
        $(this).find('img').hide()
    });

演示和完整代码如下： http : //phpfiddle.org/main/code/uu9x-w50q

我尝试使用隐藏图像。 但这不起作用

我怎么解决这个问题？

Answer 1

您应该使用parent方法来实现此目的，因为image DOM元素属于.show-button的parent方法。

$(document).on('click',".show-button",function(){
    var imgTmpl = '<div class="img-container">'+
               '<button  style="display: none;" type="submit" class="btn btn-danger show-button">'+
               '<i class="glyphicon glyphicon-trash"></i>'+
                '</button></div>';
    $(this).parent().remove();
    $('body').append(imgTmpl);
});

这是解决方案。

Answer 2

尝试使用closest()

 $(".show-button").click(function(){
        $(this).closest('.img-container').find('img').hide()
        //$(this).closest('.img-container').children().remove() used for remove the all child element of the `.img-container`
        console.log('hi')
    });