JavaScript-清除元素

我有一个脚本，它拍摄了一张即将上传的图片，并添加了图片预览。唯一的问题是，如果再次填写表单，则前一张图像不清晰

放置缩略图图像的位置的id为“缩略图”。有人能帮我添加一两行代码，在添加新的图像预览之前清除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>

jQuery（函数（$）{
var fileDiv=document.getElementById（“上传”）；
var fileInput=document.getElementById（“上传图像”）；
log（fileInput）；
fileInput.addEventListener（“更改”，函数（e）{
var files=this.files
显示缩略图（文件）；
}，错）
fileDiv.addEventListener（“单击”，函数（e）{
$（fileInput）.show（）.focus（）.click（）.hide（）；
e、 预防默认值（）；
}，错）
fileDiv.addEventListener（“dragenter”，函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
}，假）；
fileDiv.addEventListener（“dragover”，函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
}，假）；
fileDiv.addEventListener（“删除”，函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
var dt=数据传输；
var files=dt.files；
显示缩略图（文件）；
}，假）；
函数显示缩略图（文件）{
//清除分区
对于（var i=0；i
这将清除缩略图的内容。之后，您可以像在代码中那样附加图像

编辑：您应该真正使用jQuery，以避免跨浏览器问题：

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

这也会清除缩略图元素，但会将跨浏览器问题处理延迟到jQuery。
我应该将其放在哪里？我在//清除div注释之后添加了它，但它破坏了图像预览。另外，第二行“编辑”工作得很好！谢谢！
$('#thumbnail').empty();