Question

图像以缩略图的形式添加，但删除操作的代码无法正常工作。这是我的代码......
我知道的“span.innerHtml”出了问题......但是无法解决它！删除操作的脚本作为DELETE作为链接工作正常....但是当作为缩略图与图像集成时它无法工作....

//select the files to be added
<input type="file" id="files" name="files[]"/>
<output id="list"></output>

//code for delete operation(after onClick)
<script>
$(document).ready(function(){ 
    $('a.delete').on('click',function(e){
        e.preventDefault();
        imageID = $(this).closest('.image')[0].id;
        alert('Now deleting "'+imageID+'"');
        $(this).closest('.image')
            .fadeTo(300,0,function(){
                $(this)
                    .animate({width:0},200,function(){
                        $(this)
                            .remove();
                    });
            });
    });

}); 

</script>


//code to add images to thumbnails(before onClick)
<script>
function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }


        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {

                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<a href="#" class="delete">Delete<img class="thumb" src="', e.target.result,
                    '" title="', escape(theFile.name), '" width="110" height="150"/></a>'].join('');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

</script>

Answer 1

认为它以某种方式工作并且它不适用于动态添加的图像，您应该更改以下内容：

 $('a.delete').on('click',function(e){...

到

 $(document).on('click','a.delete', function(e){...

此选择器也不正确，因为您没有名为“image”的css类：

$(this).closest('.image')

它应该是（改为查找，因为它是子元素）：

$(this).find('img')

否则请分享一些细节，它是如何起作用的。有错误吗？

在修复我写的所有内容之后它正在工作（所以感谢减号）： http://jsfiddle.net/balintbako/EdkHN/

您可能还想删除整个范围： http://jsfiddle.net/balintbako/EdkHN/1/

想要删除在删除链接上单击时添加到缩略图的图像

1 个答案: