I have a div and when user clicks on it 20 nested divs each inside of another should be appended.And when any of these divs is clicked it should disappear, without affecting its children. Nested div structure.When, for example, the 10th(highlighted with red) is clicked it should disappear
I'm sorry to bother you if the question is a trivial one. Thank you.
Code :
function run(e) {
var div = document.createElement("div");
div.setAttribute('class', 'Delete');
div.addEventListener("click", run);
e.target.appendChild(div);
this.removeEventListener("click", run);
e.stopPropagation()
}
function removeChildDiv(e)
{
if(e.target.className === 'Delete')
{
e.target.parentNode.removeChild(e.target);
}
document.getElementById("1").addEventListener("click", run);
}
document.getElementById("1").addEventListener("click", run);
document.getElementById("1").addEventListener("click", removeChildDiv);
html, body {
height: 100%;
width: 100%;
}
div {
border: 1px solid black;
width: 90%;
height: 90%;
background-color:green;
}
<div id="1"></div>
See Question&Answers more detail:os