click a button to delete itself and its parent div

Question

--- UPDATED QUESTION ---

Thanks for all the answers. I wrote the JS code to delete the parent div when clicking its corresponding button in my JS PRACTICE !!!

However, the same JS code does not work in my real JS project where all the parent div are created dynamically. The complete code can be found below.

There is no error but the JS code just does not work. Any ideas?

BELOW IS THE SIMPLIFIED **REAL JS PROJECT ** COMPLETE CODE


<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Upload Imgs</title>

  <style type="text/css">
    .container {
      width: 100%;
    }

    .display-area {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

    }

    img {
      max-width: 100%;

    }

    .image-preview {
      width: 80%;
      min-height: 300px;
      border: 2px dashed #dddddd;
      display: block;

      /*default text*/
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: #cccccc;
    }


    .newbtns {
      border: 0;
      background: lightgrey;
      text-shadow: 1px 1px 1px white;
      border: 1px solid #999;
      position: absolute;
      display: block;

    }
  </style>

</head>

<body>
  <div class="container">
    <div id='inputFiles'><input type="file" class="file" name="image_uploads" accept="image/png, image/jpeg, image/jpg"
        multiple></div>

    <div class="display-area" id='imgDisplay'>
    </div>
    <div id="defaultContent">
      <p>No images</p>
    </div>
    <button type="button" value="Reload page" onclick="window.location.reload()">Reload Page</button>
  </div>
  </div>

</body>

<script>
  var input = document.querySelector('input');
  var uploadBox = document.getElementById('uploadBox');
  var defaultContent = document.getElementById('defaultContent');
  var imgDisplay = document.getElementById('imgDisplay')

  //upload & preview
  input.addEventListener('change', function () {
    var imgFiles = input.files;
    defaultContent.style.display = 'none';
    for (var i = 0; i < imgFiles.length; i++) {
      var imgDiv = document.createElement('div');
      imgDiv.className = 'imgBox';
      imgDiv.id = 'box' + i;
      imgDiv.style.width = "20%";
      var images = document.createElement('img');
      images.src = URL.createObjectURL(imgFiles[i]);
      var newbtn = document.createElement("button");
      newbtn.type = "button";
      newbtn.className = "newbtns";
      newbtn.innerHTML = "X";
      newbtn.style.color = "orange";
      newbtn.style.background = 'red';
      newbtn.id = 'newbtn' + i;
      imgDiv.appendChild(newbtn);
      imgDiv.appendChild(images);
      imgDisplay.appendChild(imgDiv);
    }
  });

  allButtons = document.getElementsByTagName('button');
  for (var n = 0; n < allButtons.length; n++) {

    if (allButtons[n].getAttribute('id') === 'newbtn' + n) {

      allButtons[n].onclick = function () {
        this.parentNode.parentNode.removeChild(this.parentNode);
      }

    } else { };

  }

</script>
</html>

Answer 1

you can do something like this:

const buttonOne = document.getElementById('btn1');
const buttonTwo = document.getElementById('btn2');


buttonOne.addEventListener("click", () => deleteElementAndThisChildNodes('box1'))
buttonTwo.addEventListener("click", () => deleteElementAndThisChildNodes('box2'))

function deleteElementAndThisChildNodes(parentId) {
  document.getElementById(parentId).remove()
}

Answer 2

To each of your button elements add onclick="DeleteParent(this)" then outside of your dynamic divs include the following:

<script type="text/javascript">
     function DeleteParent(button){
          button.parentElement.remove();
     }
</script>

Answer 3

You can do this:

const display = document.getElementById("imgdisplayarea");

display.addEventListener("click", e => {
  if(e.target.tagName === 'BUTTON'){
  //if an element within a display div for a button, remove your father
    e.target.parentNode.remove();
  }
});

Answer 4

Here is a very simple example that works exactly how you want it (based on your question):

 function disable() { document.getElementById("demo").style.display = "none"; }

 <div id="demo"> <button onclick="disable()"> Click Me </button> <h3> This is part of the div </h3> </div>

click a button to delete itself and its parent div

Question

4 answers

solution1
0 ACCPTED 2020-03-26 01:41:37

solution2
0 2020-03-26 01:42:40

solution3
0 2020-03-26 02:00:15

solution4
0 2020-03-26 02:06:08

click a button to delete itself and its parent div

Question

4 answers

solution1 0 ACCPTED 2020-03-26 01:41:37

solution2 0 2020-03-26 01:42:40

solution3 0 2020-03-26 02:00:15

solution4 0 2020-03-26 02:06:08

solution1
0 ACCPTED 2020-03-26 01:41:37

solution2
0 2020-03-26 01:42:40

solution3
0 2020-03-26 02:00:15

solution4
0 2020-03-26 02:06:08