Question

I have a tree with ul and has the following structure:

<div id="Tree">
  <ul>
    <li>
      <a class="collapseLink" href="#">
        <span class="hide">Expand Root Node</span>
      </a>
      <a class="selectLink" href="#">
        Root Node
      </a>
      <ul>
        <li id="item_1">Sub Node 1</li>
        <li id="item_2">Sub Node 2</li>
        <li id="item_3">Sub Node 3</li>
        <li id="item_4">Sub Node 4</li>
        <li id="item_5">Sub Node 5</li>
        <li id="item_6">Sub Node 6</li>
      </ul>
    </li>
  </ul>
</div>

I would ideally like to limit the number of the Sub Nodes in the tree and tried to implement that with the following:

$(document).ready(function() { 
    var rootNode = $('#Tree ul li a:first');
    // If the root node has an 'expandLink' class then it's closed and can be opened    //(via a click)
    if (rootNode.hasClass('expandLink')){
       rootNode.click();
       limitRootNodes();
    }
    function limitRootNodes() {
        // Get the direct child nodes for the root list element
        var tree_ul = $('#Tree ul li ul:first').children();
        // list limit
        var max_listCount = 3;
        // remove the last element if the list size exceeds the limit
        while (tree_ul.size() > max_listCount){
            $('li:last-child', tree_ul).remove();  
        }   
    }
});

However, the above code is not removing the excess list elements. Any suggestions as to what is causing this?

Answer 1

Here’s another way to approach this. Replace your while-loop with this:

tree_ul.each(function(n,item){
   if(n > (max_listCount - 1))
     $(item).remove();
});

EDIT: Also, in your HTML example, the first anchor tag has class collapseLink, but this code is looking for the class expandLink before calling the limitRootNodes() function, so it is not going to get called.

if (rootNode.hasClass('expandLink')){
   rootNode.click();
   limitRootNodes();
}