Question

I have a really complicated elements tree being rendered, with a lot of levels and I need to dig deep into the last child to start removing from the bottom to top and I need to do this dynamically.

What i mean:

I want to start from let’s say “div” element and loop through all child elements. When I find the first child of “div” I want to go and find the children of that child.

I hope it’s clear but here is a more visual representation to help you understand:

<div> 1
    <a>1(a)</a>
    <div>1(b)
        <div>1(b)(1)
            <div>1(b)(1)(1)
                <a>1(b)(1)(1)(1)</a>
            </div>
        </div>
        <span>1(b)(2)</span>
    </div>
    <div>1(c)</div>
</div>

Considering the above structure I want: Starting from point 1 to dig into point 1(b)(1)(1)(1) dynamically(without knowing ids, classes or type) and destroy the last child(1(b)(1)(1)(1)) and then it’s parent and so on.

How can I do this?

Answer 1

DFS = Depth First Search.
Here’s a simple DFS which does what you asked (if I got your requirements right) :
http://jsfiddle.net/umkZ2/

Each alert colors the deepest node. You may replace it with a delay or something.