删除父 div JavaScript

Question

In this solution I just upload images from PC. You can see in last 3 lines in JavaScript code that I want delete each image when its close button is clicked. The problem is that this does not work: what I am doing is not display the parent div which is the image, when close button, its child div is pressed. What could be the issue?

 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

You are attaching the event listeners before the close divs are created. Instead, add the event listener when you create each element.

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

Demo:

 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>