How to make use of it:

1. Import the TreeX.js JavaScript library into the HTML.

<script src="treex.js"></script>

2. Define your personal nodes to be displayed within the tree.

const node1 = {
      data: "JavaScript",
      children: [node2, node3, node4]
}
const node2 = {
      data: "Vanilla",
      children: []
}
const node3 = {
      data: "jQuery",
      children: []
}
const node4 = {
      data: "React",
      children: []
}
// ...

3. Create a container to hold the tree.

<div id="example"></div>

4. Render a tree contained in the container you simply created.

let tree = treex.Tree.createTree(node1);
let element = treex.TreeX.createTree(tree, { document });
let example = document.querySelector('#example');
example.appendChild(element);

5. Create an input filed to filter by way of the info.

<input class="filter" type="text" placeholder="filter"/>

let filterEl = document.querySelector('input.filter');
  filterEl.oninput = () => {
    tree.getNodes().forEach((n) => {
      if(n.data.toLowerCase().includes(filterEl.value.toLowerCase())){
        n.setVisibility(true);
      }else{
        n.setVisibility(false);
      }
    });
};

6. Remove a node from the tree.

// remove node 1 
example.children[0].remove();

7. Determine whether to hide the basis node.

let element = treex.TreeX.createTree(tree, { document, trueORfalse });

Vertical Hierarchical Tree, TreeX Plugin/Github, dynamic tree structure using jquery, treeview jquery bootstrap, javascript tree visualization

See Demo And Download