JavaScript - 清除元素

Question

我有一个脚本，需要上传图像并添加图像的图像预览。唯一的问题是，如果表格被重新填写，则前一张图片不会被清除。

缩略图图像放置位置的标识是“缩略图”。有人可以帮我添加一行或两行代码，在添加新图像预览之前清除div吗？

<script> 
    jQuery(function($){ 
var fileDiv = document.getElementById("upload"); 
var fileInput = document.getElementById("upload-image"); 
console.log(fileInput); 
fileInput.addEventListener("change",function(e){ 
    var files = this.files 
    showThumbnail(files); 
},false) 

fileDiv.addEventListener("click",function(e){ 
    $(fileInput).show().focus().click().hide(); 
    e.preventDefault(); 
},false) 

fileDiv.addEventListener("dragenter",function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
},false); 

fileDiv.addEventListener("dragover",function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
},false); 

fileDiv.addEventListener("drop",function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 

    var dt = e.dataTransfer; 
    var files = dt.files; 

    showThumbnail(files); 
},false); 

function showThumbnail(files){ 

    // clear the div 

    for(var i=0;i<files.length;i++){ 
    var file = files[i] 
    var imageType = /image.*/ 
    if(!file.type.match(imageType)){ 
     console.log("Not an Image"); 
     continue; 
    } 

    var image = document.createElement("img"); 
    // image.classList.add("") 
    var thumbnail = document.getElementById("thumbnail"); 
    image.file = file; 
    thumbnail.appendChild(image) 

    var reader = new FileReader() 
    reader.onload = (function(aImg){ 
     return function(e){ 
     aImg.src = e.target.result; 
     }; 
    }(image)) 
    var ret = reader.readAsDataURL(file); 
    var canvas = document.createElement("canvas"); 
    ctx = canvas.getContext("2d"); 
    image.onload= function(){ 
     ctx.drawImage(image,100,100) 
    } 
    } 
} 
      }); 
      </script> 

Answer 1

thumbnail.innerHTML = '' 

，将清除缩略图的内容。之后，您可以像在代码中那样追加图像。

编辑：你应该使用jQuery，以避免跨浏览器的头痛：

$('#thumbnail').empty(); 

这也清除缩略图要素，但推迟跨浏览器的问题解决到jQuery的。