Javascript 是否在上载新图像时清除缩略图？

我正在上传多张图片并通过制作缩略图进行预览。当我重新上传图片时，以前的图片也会出现在那里。如何在上传新图片时清除以前的图片

我的html：-

 <div>
                                        <input type="file" id="files"  multiple name="media" accept="image/*" />
                                        <output id="list"></output>
                                    </div>

我制作缩略图的脚本：-

function handleFileSelect(evt) {
            var files = evt.target.files; // FileList object
            // Loop through the FileList and render image files as thumbnails.

            for (var i = 0, validatedfiles,f; f = files[i],validatedfiles = files[i]; i++) {
                if (i > 3) {

                    break;
                }
                  //  alert (f.name);
                var reader = new FileReader();
                var imagearray = [];
                imagearray = files[i];
   //             alert ( imagearray);

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

                        // Render thumbnail.
                                              span.innerHTML = ['<img class="thumbs_image" src="',e.target.result,'" title="', escape               (theFile.name), '"/>'].join('');

                        document.getElementById('list').insertBefore(span, null);
                         span.children[1].addEventListener("click", function (event) {
                            span.parentNode.removeChild(span);


                })(imagearray);

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

功能手柄文件选择（evt）{
var files=evt.target.files；//文件列表对象
//循环浏览文件列表并将图像文件渲染为缩略图。
对于（var i=0，validatedfiles，f；f=files[i]，validatedfiles=files[i]；i++）{
如果（i>3）{
打破
}
//警报（f.name）；
var reader=new FileReader（）；
var imagearray=[]；
imagearray=文件[i]；
//警报（图像阵列）；
//闭包以捕获文件信息。
reader.onload=（函数（文件）{
返回函数（e）{
//渲染缩略图。
span.innerHTML=[''）.join（''）；
document.getElementById（'list'）.insertBefore（span，null）；
子类[1]。addEventListener（“单击”），函数（事件）{
parentNode.removeChild（span）；
})（图像阵列）；
//作为数据URL读入图像文件。
reader.readAsDataURL（imagearray）；
}
}

html：-

<div>
                                        <input type="file" id="files"  multiple name="media" accept="image/*" />
                                        <output id="list"></output>
                                    </div>

我将在脚本中将输出的id传递为空： 脚本：

function handleFileSelect(evt) {
            var files = evt.target.files; // FileList object
            // Loop through the FileList and render image files as thumbnails.

            for (var i = 0, validatedfiles,f; f = files[i],validatedfiles = files[i]; i++) {
           $("#list").html("");
                if (i > 3) {

                    break;
                }
                  //  alert (f.name);
                var reader = new FileReader();
                var imagearray = [];
                imagearray = files[i];
   //             alert ( imagearray);

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

                        // Render thumbnail.
                                              span.innerHTML = ['<img class="thumbs_image" src="',e.target.result,'" title="', escape               (theFile.name), '"/>'].join('');

                        document.getElementById('list').insertBefore(span, null);
                         span.children[1].addEventListener("click", function (event) {
                            span.parentNode.removeChild(span);


                })(imagearray);

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

功能手柄文件选择（evt）{
var files=evt.target.files；//文件列表对象
//循环浏览文件列表并将图像文件渲染为缩略图。
对于（var i=0，validatedfiles，f；f=files[i]，validatedfiles=files[i]；i++）{
$（“#列表”）.html（“”）；
如果（i>3）{
打破
}
//警报（f.name）；
var reader=new FileReader（）；
var imagearray=[]；
imagearray=文件[i]；
//警报（图像阵列）；
//闭包以捕获文件信息。
reader.onload=（函数（文件）{
返回函数（e）{
//渲染缩略图。
span.innerHTML=[''）.join（''）；
document.getElementById（'list'）.insertBefore（span，null）；
子类[1]。addEventListener（“单击”），函数（事件）{
parentNode.removeChild（span）；
})（图像阵列）；
//作为数据URL读入图像文件。
reader.readAsDataURL（imagearray）；
}
}

你似乎知道如何制作缩略图，你在做什么来删除它们？我想做的是重置我的输出列表以删除它们。document.getElementById（'files'）。addEventListener（“单击”，函数（事件）{$（'#列表'）。val（“”；}也许可以尝试

$（'#列表'）。html（“”；

）。