javascript - How to implement tree structure type form filling dynamically in js -

i want create dynamic tree structure, want edit/delete nodes , data. @ each level of tree structure have different forms add/edit/delete data.

you can use telerik kendo ui treeview. it's free, easy implement , supports of requirements.

basic example:

<div class="demo-section k-header">     <ul id="treeview">         <li data-expanded="true">             <span class="k-sprite folder"></span>             web site             <ul>                 <li data-expanded="true">                     <span class="k-sprite folder"></span>images                     <ul>                         <li><span class="k-sprite image"></span>logo.png</li>                         <li><span class="k-sprite image"></span>body-back.png</li>                         <li><span class="k-sprite image"></span>my-photo.jpg</li>                     </ul>                 </li>                 <li data-expanded="true">                     <span class="k-sprite folder"></span>resources                     <ul>                         <li data-expanded="true">                             <span class="k-sprite folder"></span>pdf                             <ul>                                 <li><span class="k-sprite pdf"></span>brochure.pdf</li>                                 <li><span class="k-sprite pdf"></span>prices.pdf</li>                             </ul>                         </li>                         <li><span class="k-sprite folder"></span>zip</li>                     </ul>                 </li>                 <li><span class="k-sprite html"></span>about.html</li>                 <li><span class="k-sprite html"></span>contacts.html</li>                 <li><span class="k-sprite html"></span>index.html</li>                 <li><span class="k-sprite html"></span>portfolio.html</li>             </ul>         </li>     </ul> </div>  <script>     $(document).ready(function() {         $("#treeview").kendotreeview();     }); </script>