Verschachtelte divs, die auf Klick gelöscht werden können

Question

Ich habe ein div und wenn der Benutzer darauf klickt 20 verschachtelte divs jeder innerhalb eines anderen sollte angehängt werden.Und wenn einer dieser divs geklickt wird, sollte es verschwinden, ohne Auswirkungen auf seine Kinder. Nested div structure.When, for example, the 10th(highlighted with red) is clicked it should disappear

Es tut mir leid, Sie zu stören, wenn die Frage eine triviale ist. Vielen Dank.

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>

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);