Question

I’m a beginner programmer and I’m stuck with the following problem:
If I have a nested unordered list, how can I copy only the elements up
to a certain level? For example if I want to reduce this unordered list to the first two levels:

<ul>
  <li>A</li>
  <ul>
    <li>C<br>
    </li>
    <li>D<br>
    </li>
    <ul>
      <li>E<br>
      </li>
      <li>F<br>
      </li>
      <ul>
        <li>G<br>
        </li>
        <li>H<br>
        </li>
      </ul>
    </ul>
    <li>E<br>
    </li>
  </ul>
  <li>B</li>
</ul> 

to

<ul>
  <li>A</li>
  <ul>
    <li>C<br>
    </li>
    <li>D<br>
    </li>
    <li>E<br>
    </li>
  </ul>
  <li>B</li>
</ul>

Is there any easy way to achieve this?

Answer 1

Simple version:

$('ul ul ul').remove();

jsFiddle Demo

I also wrote a little function that lets you specify a root element and a level also:

function reduce(root, selector, level) {
    var use = root;
    for (var i = 0; i <= level; i++) {
        use += ' ' + selector;
    }
    $(use).remove();
}

Use by calling:

//if the lists are in an element with the id 'root', see Demo
reduce('#root', 'ul', 2);

​
jsFiddle Demo