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

【问题标题】：click a button to delete itself and its parent div单击按钮以删除自身及其父 div
【发布时间】：2020-07-06 15:26:34
【问题描述】：

---更新的问题---

感谢您的所有回答。在我的JS PRACTICE中单击相应按钮时，我编写了JS代码来删除父div！！！！

但是，相同的 JS 代码在我的所有父 div 都是动态创建的真实 JS 项目中不起作用。完整的代码可以在下面找到。

没有错误，但 JS 代码不起作用。有什么想法吗？

以下是简化的 **REAL 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>

【问题讨论】：

请提供minimal reproducible example，说明您为尝试解决此问题所做的工作。访问How to Ask了解更多信息
-> JavaScript：查找自身的父级并移除/隐藏 DOM 节点。
这能回答你的问题吗？ Remove DIV tag using Javascript or Jquery
大概，imgdispareaRef.removeChild(clickedButtonRef.parentNode)。
最快的就是把CSS属性display到none放在div上<div id='box1'>

标签： javascript html css dom dynamic

【解决方案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()
}

【讨论】：

谢谢。我成功编写了 JS 代码，在我的实践 js 文件中删除了父 div，而相同的 js 代码在我的真实 js 项目中不起作用。我已经列出了上面的两个代码。知道为什么？
嗨@smallwhite，问题是你没有定义“reloadPage()”函数，我对你的代码做了一点简化以在按钮之间迭代codesandbox.io/s/frosty-agnesi-st1y9
糟糕...我刚刚定义了“reloadPage()”函数...但问题在于其他动态创建的按钮...我的 js 代码对它们不起作用...当我点击图片上动态创建的按钮，不会删除对应的父div...
我做了一个重构来做你需要的事情，基本上，我设置了一个 for 来玩一个函数 5 次，这个函数在父 div 中创建一个按钮，并在任何按钮上添加一个 eventListener 来删除他们的父母。 codesandbox.io/s/frosty-agnesi-st1y9
谢谢！！！我终于想通了！！！它与代码的顺序有关。现在我的代码运行良好！！ ;)

【解决方案2】：

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

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

【讨论】：

【解决方案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();
  }
});

【讨论】：

谢谢。单击该 div 内的按钮时，我的 js 代码可以删除静态 div，但不能删除动态创建的按钮……有什么想法吗？

【解决方案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>

【讨论】：