title: jsTree Clear Tree, Rebuild Tree
body: <p>jsTree appears to be a beautiful lightweight jquery Tree building package, but after working with it for a few days it really left a sour taste in my mouth for the lack of clear and useful documentation online.</p>
  
  <p>I'm including the following methods below in case any future devs are trying to figure out how to accomplish this and don't feel like spending hours or days stumbling through it. I'm sure there's a more elegant or Best Practice way to code this, but I couldn't find any examples that didn't involve building the ajax method into the jstree function itself (very much not an option in my case). in my example below, I'm free to call an Ajax method in makeTree() to get my data, build the JSON as I see fit and insert it into the tree manually.</p>
  
  <p>Anyway, below is some sample code I created to Build a tree on page load, Empty the tree of all its nodes on emptyTree(), and rebuild the tree from JSON on makeTree(). This is obviously an incomplete reference, but if you just need a quick and dirty way to do what I'm doing with this package, you might appreciate this.</p>
  
  <pre><code>    $(document).ready(function(){
          $("#myJSTree").jstree({
              'core' : {
                  'check_callback' : true 
              }
          });
      });
  
      function emptyTree()
      {
          var myTree = $("#myJSTree").jstree(true);
  
          $("#myJSTree .jstree-leaf, .jstree-anchor").each(function(){
  
              myTree.delete_node($(this).attr('id'));
  
          });
      }
  
      function makeTree()
      {
          var myTree = $("#myJSTree").jstree(true);
  
          // This JSON is just an example, you can create it how you need it, I'll include the sample Valid JSON at the bottom for reference.
          var nodesJSON = { "text": "Passed Testing", "icon": "images/success.png", "state": { "opened": true }, "children": [{ "text": "Passed Testing", "icon": "images/success.png", "state": { "opened": true }},{ "text": "Passed Testing", "icon": "images/success.png", "state": { "opened": true }}]};
  
          myTree.create_node("#", nodesJSON, "last", function() {}, true);
  
      }
  
  
  // Adding the HTML that gets built into the tree at page load in my example
  &lt;div id="myJSTree"&gt;
      &lt;ul&gt;
          &lt;li&gt;Node 1&lt;/li&gt;
          &lt;li class="jstree-open"&gt;
              &lt;ul&gt;
                  &lt;li&gt;SubNode 1&lt;/li&gt;
                  &lt;li&gt;SubNode 2&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;Node 2&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  // Valid JSON format that took me a while to find on the jstree website
  // I didn't write these. it's copied and pasted.
  // sample JSON 1
  {
    id          : "string" // will be autogenerated if omitted
    text        : "string" // node text
    icon        : "string" // string for custom
    state       : {
      opened    : boolean  // is the node open
      disabled  : boolean  // is the node disabled
      selected  : boolean  // is the node selected
    },
    children    : []  // array of strings or objects
    li_attr     : {}  // attributes for the generated LI node
    a_attr      : {}  // attributes for the generated A node
  }
  
  // Sample JSON 2
  {
    id          : "string" // required
    parent      : "string" // required
    text        : "string" // node text
    icon        : "string" // string for custom
    state       : {
      opened    : boolean  // is the node open
      disabled  : boolean  // is the node disabled
      selected  : boolean  // is the node selected
    },
    li_attr     : {}  // attributes for the generated LI node
    a_attr      : {}  // attributes for the generated A node
  }
  </code></pre>
  
  <p>Please feel free to share any insights you have if you have a better way to accomplish this, but this package's documentation is not super intuitive to me. I've combed through their webpage, it was painful.</p>