CODEWITHSUNDEEP
javascriptjqueryhtmlcss
peterHasemann
peterHasemann

Reputation: 1590

click the child div but not the parent div

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

Example

Upvotes: 1

Views: 89

Answers (2)

Vincent1989
Vincent1989

Reputation: 1657

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>

Upvotes: 0

epascarello
epascarello

Reputation: 207521

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>

Upvotes: 3

Related Questions