I use Jquery tree plugin ( to render hierarchical data. I have coded additional functions which would allow user to interact with this data (like adding/deleting nodes, swapping nodes, etc...)

Currently this plugin supports that whenever you want to add any node, you can call following method,

$("#browser").treeview({ add: branches });

here "branches" is JQuery object created with the HTML block, which would represent a particular node.

However, for delete and swapping of nodes, I use common JQuery functions like,

for delete, $("#topnd2").remove();

for swapping,

var next = $("#topnd2").next(); $("#topnd2").insertAfter(next);

"topnd2" is an id of any particular tree node.

The nodes get deleted / swapped properly but the problem is the tree does not get rendered and therefore the tree images (mainly vertical lines denoting branches) are not set properly.

For example, if I delete the last node then that node will be removed from rendered treeview but the remaining sibling node should get L as branch line image but not | .

I tried calling


Please let me know your ideas.

Thanks, Jatan

+1  A: 

I found some workaround as given below,

Once the node is swapped up, virtually add its previous node to its child,


If node is swapped down, virtuall add the current node to its next node.


currently it's working fine, will update this post, if I find any problems in this approach. Also please validate this approach if you know.

Regards, Jatan


Above answer works great!


If you try to refresh the treeview again after node removal, the link will work but not the [+] or [-] icon. Tried this on several browsers..