单击按钮以删除自身及其父 div

Question

--- 更新的问题 ---

感谢所有的答案。 我写了JS代码，在我的JS实践中点击对应的按钮时删除父div！！！

但是，相同的 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>

Answer 1

你可以这样做：

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

向您的每个按钮元素添加 onclick="DeleteParent(this)" 然后在您的动态 div 之外包括以下内容：

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

Answer 3

你可以这样做：

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

这是一个非常简单的示例，它完全符合您的要求（基于您的问题）：

 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>

单击按钮以删除自身及其父 div

问题描述

4 个解决方案

解决方案1
0 已采纳 2020-03-26 01:41:37

解决方案2
0 2020-03-26 01:42:40

解决方案3
0 2020-03-26 02:00:15

解决方案4
0 2020-03-26 02:06:08

单击按钮以删除自身及其父 div

问题描述

4 个解决方案

解决方案1 0 已采纳 2020-03-26 01:41:37

解决方案2 0 2020-03-26 01:42:40

解决方案3 0 2020-03-26 02:00:15

解决方案4 0 2020-03-26 02:06:08

解决方案1
0 已采纳 2020-03-26 01:41:37

解决方案2
0 2020-03-26 01:42:40

解决方案3
0 2020-03-26 02:00:15

解决方案4
0 2020-03-26 02:06:08