单击按钮以删除自身及其父 div
[英]click a button to delete itself and its parent div
问题描述
--- 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 !!!我写了JS代码，在我的JS实践中点击对应的按钮时删除父div！！！
However, the same JS code does not work in my real JS project where all the parent div are created dynamically.但是，相同的 JS 代码在我的真实 JS 项目中不起作用，其中所有父 div 都是动态创建的。 The complete code can be found below.完整的代码可以在下面找到。
There is no error but the JS code just does not work.没有错误，但 JS 代码不起作用。 Any ideas?有任何想法吗？
BELOW IS THE SIMPLIFIED **REAL JS PROJECT ** COMPLETE CODE下面是简化后的**真正的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 个解决方案
解决方案1
0 已采纳 2020-03-26 01:41:37
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()
}
解决方案2
0 2020-03-26 01:42:40
To each of your button elements add onclick="DeleteParent(this)" then outside of your dynamic divs include the following:向您的每个按钮元素添加 onclick="DeleteParent(this)" 然后在您的动态 div 之外包括以下内容：
<script type="text/javascript">
function DeleteParent(button){
button.parentElement.remove();
}
</script>
解决方案3
0 2020-03-26 02:00:15
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();
}
});
解决方案4
0 2020-03-26 02:06:08
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.