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

图像被添加为缩略图，但删除操作的代码无法工作。这是我的代码
"span.innerHtml"中出现了问题，我知道。。。但无法解决
将删除操作作为delete as链接的脚本运行良好。。。。但当与图像集成为缩略图时，它无法工作。。。。

//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>