刪除父 div JavaScript

Question

在這個解決方案中，我只是從 PC 上傳圖像。 您可以在 JavaScript 代碼的最后 3 行中看到我想在單擊其關閉按鈕時刪除每個圖像。 問題是這不起作用：我正在做的不是顯示作為圖像的父 div，當關閉按鈕時，它的子 div 被按下。 可能是什么問題？

 let inputFile = document.getElementById("addImg1"); let rowOfPhotos = document.getElementById("row-of-product-photos"); inputFile.addEventListener("change", function (e) { let files = e.target.files; let output = rowOfPhotos; for (let i = 0; i < files.length; i++) { let file = files[i]; if (file) { const reader = new FileReader(); reader.addEventListener("load", function (e) { console.log(this); let imageFile = e.target; let divDocument = document.createElement("div"); let divDocumentClose = document.createElement("div"); let image = document.createElement("img"); divDocument.setAttribute("class", "id-document"); divDocumentClose.setAttribute("class", "id-document-close"); image.setAttribute("class", "image-preview"); image.setAttribute("style", "width: inherit; height: inherit; border-radius: 20px;"); image.setAttribute("src", imageFile.result); divDocument.appendChild(divDocumentClose); divDocument.appendChild(image); rowOfPhotos.appendChild(divDocument); }); reader.readAsDataURL(file); } else { image.style.display = null; } } }); document.querySelectorAll(".id-document-close").forEach(item => { item.addEventListener("click", e => { this.parentElement.style.display = "none"; }); });

 .id-document{ width: 90px; height: 90px; background: url(webimage/mario.jpg) no-repeat center center; background-size: cover; box-sizing: border-box; border-radius: 20px; position: relative; display: inline-block; cursor: pointer; margin-right: 3%; }.id-document-close{ height: 25px; width: 25px; position: absolute; right: -8px; top: -6px; border-radius: 100px; background: url(icons/close-white.svg) no-repeat center center; background-size: 11px; background-color: #282b2e; cursor: pointer; }

 <div class="verification-main-input-div"> <p class="verification-main-text">Add a photo with your item (optional)</p> <div id="row-of-product-photos" class="row-of-id-photos"> <div class="two1" id="addImgLabel1"> <label for="addImg1" class="input-label inputLabelCss"> <div class="photosvg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera camera-icon"> <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path> <circle cx="12" cy="13" r="4"></circle> </svg> </div> </label> <:-- ngIf. images.length<maxImagesForProduct --> <input id="addImg1" type="file" accept=",png. ,jpg. :jpeg" style="display:none" multiple=""> </div> </div> </div>

Answer 1

您在創建關閉 div 之前附加事件偵聽器。 相反，在創建每個元素時添加事件偵聽器。

divDocumentClose.addEventListener("click", e => {
    divDocument.style.display = "none";
});

演示：

 let inputFile = document.getElementById("addImg1"); let rowOfPhotos = document.getElementById("row-of-product-photos"); inputFile.addEventListener("change", function (e) { let files = e.target.files; let output = rowOfPhotos; for (let i = 0; i < files.length; i++) { let file = files[i]; if (file) { const reader = new FileReader(); reader.addEventListener("load", function (e) { let imageFile = e.target; let divDocument = document.createElement("div"); let divDocumentClose = document.createElement("div"); let image = document.createElement("img"); divDocument.setAttribute("class", "id-document"); divDocumentClose.setAttribute("class", "id-document-close"); image.setAttribute("class", "image-preview"); image.setAttribute("style", "width: inherit; height: inherit; border-radius: 20px;"); image.setAttribute("src", imageFile.result); divDocument.appendChild(divDocumentClose); divDocument.appendChild(image); divDocumentClose.addEventListener("click", e => { divDocument.style.display = "none"; }); rowOfPhotos.appendChild(divDocument); }); reader.readAsDataURL(file); } else { image.style.display = null; } } });

 .id-document{ width: 90px; height: 90px; background: url(webimage/mario.jpg) no-repeat center center; background-size: cover; box-sizing: border-box; border-radius: 20px; position: relative; display: inline-block; cursor: pointer; margin-right: 3%; }.id-document-close{ height: 25px; width: 25px; position: absolute; right: -8px; top: -6px; border-radius: 100px; background: url(icons/close-white.svg) no-repeat center center; background-size: 11px; background-color: #282b2e; cursor: pointer; }

 <div class="verification-main-input-div"> <p class="verification-main-text">Add a photo with your item (optional)</p> <div id="row-of-product-photos" class="row-of-id-photos"> <div class="two1" id="addImgLabel1"> <label for="addImg1" class="input-label inputLabelCss"> <div class="photosvg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera camera-icon"> <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path> <circle cx="12" cy="13" r="4"></circle> </svg> </div> </label> <:-- ngIf. images.length<maxImagesForProduct --> <input id="addImg1" type="file" accept=",png. ,jpg. :jpeg" style="display:none" multiple=""> </div> </div> </div>