嵌套的div可以点击删除

Question

我有一个div，当用户点击它时，20个嵌套的div每个里面的另一个应附加。当任何这些div被点击它应该消失，而不会影响其子。 Nested div structure.When, for example, the 10th(highlighted with red) is clicked it should disappear

如果问题是微不足道的，我很抱歉打扰你。谢谢。

代码：

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>

Answer 1

https://jsbin.com/mekumaralo/edit?html,css,js,output

var parentD = document.getElementById("1"); 
window.onload = function() { 
    for (var i = 0; i < 10; i++) { 
    var div = document.createElement("div"); 
    div.textContent = "div " + i; 
    parentD.appendChild(div); 
    parentD = div; 
    } 
} 


function removeChildDiv(event) { 

//if the parent is the body, we know this is the root Div element 
//alternatively you could compare the node to the root and 
//store the root as a variable 
    if(event.target.parentNode == document.body) { 

//if there is a child add the event listener to that child 
//before removing the root div 
    if (event.target.firstElementChild) { 
     event.target.firstElementChild.addEventListener("click", removeChildDiv); 
    } 
    } 

    // changed to firstElementChild 
    // firstChild will pick up text nodes, firstElementChild will not. 
    while (event.target.firstElementChild) { 
    event.target.parentNode.insertBefore(event.target.firstElementChild, event.target); 
    } 


    event.target.parentNode.removeChild(event.target); 
} 


parentD.addEventListener("click", removeChildDiv);