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的。