单击按钮删除自身及其父级 div
--- 更新的问题 ---
感谢所有的答案。我在我的JS 实践中编写了 JS 代码，用于在单击相应按钮时删除父 div ！
然而，相同的 JS 代码在我的真实 JS 项目中不起作用，其中所有父 div 都是动态创建的。完整的代码可以在下面找到。
没有错误，但是 JS 代码不起作用。有任何想法吗？
下面是简化的 **真正的 JS 项目 ** 完整代码
<html>
<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>
慕田峪73311744回答
-
慕尼黑8549860
你可以这样做：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()} -
PIPIONE
这是一个非常简单的示例，可以完全按照您想要的方式工作（根据您的问题）：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> -
FFIVE
你可以这样做：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(); }}); -
ABOUTYOU
向每个按钮元素添加 onclick="DeleteParent(this)" 然后在动态 div 外部包含以下内容：<script type="text/javascript"> function DeleteParent(button){ button.parentElement.remove(); }</script>
随时随地看视频慕课网APP
相关分类
Html5