нажмите кнопку, чтобы удалить себя и его родительский div - PullRequest
Новая
       3

нажмите кнопку, чтобы удалить себя и его родительский div

0 голосов
/ 26 марта 2020

--- ОБНОВЛЕННЫЙ ВОПРОС ---

Спасибо за все ответы. Я написал код JS для удаления родительского элемента div при нажатии на соответствующую кнопку в моей JS PRACTICE !!!

Однако, тот же код JS не работает в моем реальном JS проекте, где все родительские div создаются динамически. Полный код можно найти ниже.

Нет ошибки, но код JS просто не работает. Любые идеи?

НИЖЕ ПРОСТО упрощенный ** РЕАЛЬНЫЙ JS ПРОЕКТ ** ПОЛНЫЙ КОД 


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

Ответы [ 4 ]

0 голосов
/ 26 марта 2020

Вот очень простой пример, который работает именно так, как вы хотите (в зависимости от вашего вопроса): 

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>
0 голосов
/ 26 марта 2020

К каждому из ваших элементов кнопки добавьте onclick = "DeleteParent (this)", а затем вне ваших динамических элементов c: 

<script type="text/javascript">
     function DeleteParent(button){
          button.parentElement.remove();
     }
</script>
0 голосов
/ 26 марта 2020

Вы можете сделать это: 

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();
  }
});
0 голосов
/ 26 марта 2020

вы можете сделать что-то вроде этого: 

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()
}
...