javascript - 删除父 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>