Delete parent 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>

because you attach the event handler before the elements exist on the page. console.log(document.querySelectorAll(".id-document-close").length); The event needs to be added when you add the button or you use event delegation. — epascarello
– epascarello, Commented Jul 10, 2020 at 14:15

Unmitigated · Accepted Answer · 2020-07-10 15:32:52Z

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>

Collectives™ on Stack Overflow

Delete parent div JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related