click the child div but not the parent div

Question

I want to create a treeview with Jquery. Creating the first child nodes works pretty fine. But when I want to create a new div and make it a child of the child div, it does not work because the parent is still selected instead of the child div.

 $(document).ready(function() { for (var i = 0; i < 5; i++) { createEle("#nodeContainer", i); } }); var currentSelectedNode = null; function createEle(parent, title) { var container = $("<div></div>"); container.addClass("node"); container.attr("id", "treeViewNode" + title); container.html(title); container.click(function() { currentSelectedNode = container; }); $(parent).append(container); } function newNode() { if (currentSelectedNode === null) currentSelectedNode = "#nodeContainer"; createEle(currentSelectedNode, "child"); } function deleteNode() { if (currentSelectedNode != null) $(currentSelectedNode).remove(); } 

 #nodeContainer { margin-top: 10px; } .node { margin: 10px; border-style: solid; border-width: 1px; border-radius: 2px; border-color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="newNode()">New Node</button> <button onclick="deleteNode()">Delete Node</button> <div id="nodeContainer"></div> 

You can select a div container and add new child containers to it. But there is no way creating child containers for the current child containers.

So what I want to create is something like this

Answer 1

stopPropagation is what you need to prevent the click from traveling up the tree.

 $(document).ready(function() { for (var i = 0; i < 5; i++) { createEle("#nodeContainer", i); } }); var currentSelectedNode = null; function createEle(parent, title) { var container = $("<div></div>"); container.addClass("node"); container.attr("id", "treeViewNode" + title); container.html(title); container.click(function(e) { e.stopPropagation() $(".selected").removeClass("selected"); currentSelectedNode = container; $(this).addClass("selected"); }); $(parent).append(container); } function newNode() { if (currentSelectedNode === null) currentSelectedNode = "#nodeContainer"; createEle(currentSelectedNode, "child"); } function deleteNode() { if (currentSelectedNode != null) $(currentSelectedNode).remove(); } 

 #nodeContainer { margin-top: 10px; } .node { margin: 10px; border-style: solid; border-width: 1px; border-radius: 2px; border-color: black; background-color: #FFF; } .selected { background-color: #CCC; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="newNode()">New Node</button> <button onclick="deleteNode()">Delete Node</button> <div id="nodeContainer"></div> 

Answer 2

Although this is not the complete solution but I think it will gives you an idea

  if( document.getElementById('treeViewNodechild') ){ 
     var childEle = $('#treeViewNodechild');
     $(childEle).append(container);
  }

The trick is to monitor is the child id exist, if yes then append within the child if not append to parent.

 $(document).ready(function() { for (var i = 0; i < 5; i++) { createEle("#nodeContainer", i); } }); var currentSelectedNode = null; function createEle(parent, title) { var container = $("<div></div>"); container.addClass("node"); container.attr("id", "treeViewNode" + title); container.html(title); container.click(function() { currentSelectedNode = container; }); $(parent).append(container); //if child exist if( document.getElementById('treeViewNodechild') ){ //console.log('child exist'); var childEle = $('#treeViewNodechild'); $(childEle).append(container); } } function newNode() { if (currentSelectedNode === null) currentSelectedNode = "#nodeContainer"; createEle(currentSelectedNode, "child"); } function deleteNode() { if (currentSelectedNode != null) $(currentSelectedNode).remove(); } 

 #nodeContainer { margin-top: 10px; } .node { margin: 10px; border-style: solid; border-width: 1px; border-radius: 2px; border-color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="newNode()">New Node</button> <button onclick="deleteNode()">Delete Node</button> <div id="nodeContainer"></div>