How to delete the parent node that has the id generated automatically? How to specify that id?

Question

I have created the tree like structure using appendChild() in JavaScript. When clicking add button a root node gets added. When clicking root node a parent node gets added. When clicking parent node a child node gets added.

Now I am trying to delete that add by adding a small icon. On clicking that icon that particular node need to be deleted.

Now I have tried using delete button. On clicking delete button the root node gets deleted. But only one node is deleted.

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

Because I have called only one ID. How to call that particular id to delete that node. I have generated the ID dynamically.

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

how to get the specific id to be deleted.on clicking root node that particular node has to be deleted.Similarly for parent and child node too

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>

I want to get that specific id of which root is clicked.

Answer 1

I'm not sure if this is what you want:

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>

Answer 2

Ok basically, you can achieve that easily using jQuery and the .parent() function. You do not need a button, you can have a picture/icon with a class and apply click function on it. This is the code below commented:

//this will add click function to the element with clickToRemove class, it can be any element h1 or image or icon. in this case i used h1 for testing only
    $(".clickToRemove").on("click", function(){   
// this line basically gets the clicked element parent and remove it.
      $(this).parent().remove(); 
    });

Here is a jsfiddle, please let me know if you need more help.

Edit: I left the above jQuery for anyone else who wants to use it. Below is pure Javascript and a new jsfiddle.

//getting all the elements you decided for them to be act like a button 
var button = document.getElementsByClassName("removeParent");


//adding a click event to the clicked element
button[0].addEventListener("click", function(){

//the "this" word specifies that only get the clicked element parent
var parent = this.parentNode;

//remove parent
parent.remove();
});

this is the jsfiddle