Dynatree does not reload with new nodes programatically

Question

I am loading the dynatree programitically when the page loads as follows

function loadTree(data)
{
   var rootNode = $("#tree").dynatree("getRoot");
   $.each(data, function () {
      var childNode = rootNode.addChild({
               title: this.agent_code + ' - ' + this.holder_name,
               tooltip: this.holder_name,
               isFolder: true,
               key:this.agent_code,
       });
    });
 }

Now after i retrieve new data from the server and wants to load with new nodes it does not remove the old node.

function reload(data)
   {
        $("#tree").dynatree("getRoot").visit(function(node){
           node.remove();
        });
        loadTree(data)
   }

The above code removes only a single node. What am i missing here. Thanks in advance

UPDATE i tried with a workaround through the following code

function reload(data)
   {
        $("#tree").remove();
        $('#test').html('<div id="tree"></div>');
        $('#tree').dynatree(); //reinitialize the tree
        loadTree(data);
   }

It does reload but then cannot populate the child nodes through lazyloading

Answer 1

This will remove all the nodes that you have added during the initial load:

$("#tree").dynatree("getRoot").removeChildren();

Answer 2

Finally I have it working. I changed the code with this line

 function reload(data)
   {
             //get all the available parent nodes
             var n = [];
             $("#tree").dynatree("getRoot").visit(function(node){
                n.push(node.data.key);
              });
              //delete each node one by one
              var tree = $("#tree").dynatree("getTree");
              $.each(n,function(index,value){
                var Cnode =  tree.getNodeByKey(value);
                if(Cnode != null) Cnode.remove();
              });
              loadTree(data);
   }

Am pretty sure this isn't the best of solution. So if anyone has better way of doing it, please post another answer.