我在 JavaScript中使用appendChild()创建了树状结构.
单击“添加”按钮时,将添加根节点.单击根节点时,将添加父节点.单击父节点时,将添加子节点.

现在我试图通过添加一个小图标来删除该添加.在单击该图标时,需要删除特定节点.

现在我尝试使用删除按钮.单击“删除”按钮后,根节点将被删除.但是只删除了一个节点.

function remove_div(){
 var A = document.getElementById('test-0');
    A.parentNode.removeChild(A);
}

因为我只调用了一个ID.
如何调用该特定id来删除该节点.
我已动态生成ID.

div1.id = 'test-' + document.querySelectorAll('.ui-modal > .msg1').length;

如何获取要删除的特定ID.单击根节点必须删除特定节点.类似于父节点和子节点

function add_div() {
  var div1 = document.createElement('ul');
  document.body.appendChild(div1);
  div1.className = 'ui-modal';
  div1.id = 'test-' + document.querySelectorAll('.ui-modal > .msg1').length;

  div1.innerHTML = '<li class="msg1"  onclick="event.stopPropagation();add_div2(this);">root</li>';
}

function remove_div() {
  var A = document.getElementById('test-0');
  A.parentNode.removeChild(A);
}

function add_div2(elem) {
  var div2 = document.createElement('ul');
  elem.appendChild(div2);

  div2.className = 'sub-div';

  div2.id = 'sub_test-' + document.querySelectorAll('.sub-div > .msg2').length;
  div2.innerHTML = '<li class="msg2"  onclick="event.stopPropagation();add_div3(this);">parent</li>';

}

function add_div3(elem) {
  var div3 = document.createElement('ul');
  elem.appendChild(div3);
  div3.className = 'inner-sub-div';
  div3.id = 'inner_sub_test-' + document.querySelectorAll('.inner-sub-div > .msg3').length;
  div3.innerHTML = '<li class="msg3" onclick="event.stopPropagation();">child</li>';
}

.ui-modal {
  width: 100px;
  border: 1px solid red;
  position: relative;
  left: 0;
  z-index: 55;
}

.sub-div {
  margin-top: 10px;
  width: 150px;
  left: 100px;
  border: 1px solid blue;
  position: relative;
  z-index: 66;
}

.inner-sub-div {
  margin-top: 10px;
  width: 150px;
  left: 250px;
  border: 1px solid blue;
  position: relative;
  z-index: 77;
}

<div class="wrapper">
  <input type="button" value="ADD" onclick="add_div();">
  <input type="button" value="DELETE" onclick="remove_div();">
</div>

我想获得点击哪个根的特定ID.

function add_div(){
  var div1 = document.createElement('ul');
  document.body.appendChild(div1);
  div1.className = 'ui-modal';
  div1.id = 'test-' + document.querySelectorAll('.ui-modal > .msg1').length;

  div1.innerHTML = '<li class="msg1"  onclick="event.stopPropagation();add_div2(this);">root<button onclick="event.stopPropagation();remove_div(this);">-</button></li>';
  
}

function remove_div(target){
 // the div
 var A = target.parentNode.parentNode;
 A.parentNode.removeChild(A);
}

function add_div2(elem){
     var div2 = document.createElement('ul');
     elem.appendChild(div2);
  
      div2.className = 'sub-div';
    
      div2.id = 'sub_test-' + document.querySelectorAll('.sub-div > .msg2').length;
      div2.innerHTML = '<li class="msg2"  onclick="event.stopPropagation();add_div3(this);">parent<button onclick="event.stopPropagation();remove_div(this)">-</button></li>';
     
}

function add_div3(elem){
     var div3 = document.createElement('ul');
     elem.appendChild(div3);
      div3.className = 'inner-sub-div';
      div3.id = 'inner_sub_test-' + document.querySelectorAll('.inner-sub-div > .msg3').length;
      div3.innerHTML = '<li class="msg3" onclick="event.stopPropagation();">child<button onclick="event.stopPropagation();remove_div(this)">-</button></li>';
}

.ui-modal{
    width: 100px;
    border: 1px solid red;
    position: relative;
    left:0;
    z-index: 55;
}
.sub-div{
    margin-top: 10px;
    width: 150px;
    left: 100px;
    border: 1px solid blue;
    position: relative;
    z-index: 66;
}
.inner-sub-div{
    margin-top: 10px;
    width: 150px;
    left: 250px;
    border: 1px solid blue;
    position: relative;
    z-index: 77;

}

<div class="wrapper">
		<input type="button" value="ADD" onclick="add_div();">
</div>