javascript - 后序遍历移除元素节点

Question

假设我有以下 HTML(压缩):

<div><div><div><ul><li>Text</li></ul></div></div></div>
<div><div><div><ul><li>Text 2</li></ul></div></div></div>
<div><div><div><ul><li>Text 3</li></ul></div></div></div>

我想先移除最低的子元素，直到最终移除父元素，然后移动到下一个父元素及其子元素。这可以通过一个简单的循环轻松完成，该循环遍历每个子元素，删除它，然后删除下一个子元素(即前一个子元素的父元素):

var children = $("body").find("*");
var i = children.length;
function loop() {
    $(children[i]).remove();
    i--;
    if (i > -1) {
        setTimeout(loop, 20);
    }
}
loop();

然而，这样做的问题是它首先从最低的父元素中删除子元素。 If you were to run this code with my test markup ，你可以明白我的意思。

我想从最顶层的父元素中删除子元素，然后向下移动，因此颠倒了上面代码的顺序。我能够 somewhat accomplish this with the following code :

var parents = $("body").children(":not(:empty)");
var i = 0;
var speed = 1000;
function loop() {
    var children = $(parents[i]).find("*");
    var x = children.length;
    function inside() {
        $(children[x]).remove();
        x--;
        if (x > -1) {
            setTimeout(inside, speed);
        } else if (i < parents.length) {
            $(parents[i - 1]).remove();
            loop();
        } else if (i === parents.length) {
            $(parents[i - 1]).remove();
        }
    }
    inside();
    i++;
}
loop();

然而，这段代码的问题在于它只是颠倒了相对于父元素的删除顺序。 If there are multiple child elements within a parent, it will still delete them in the default ascending order (bottom to top) .

因此，我的问题是，无论有多少子元素，如何以更简洁的方式按降序删除所有元素？必须有比我尝试的更好的方法。 jQuery 也不是必需的。 setTimeout 的原因是因为我需要在删除元素之间有延迟。像往常一样，我可能忽略了一些相对简单的事情，所以请耐心等待。

重申一下，如果 HTML 看起来像这样:

<div>
    <div>Child 1</div>
    <div>Child 2</div>
    <div>
        <div>Child 3</div>
        <div>Child 4</div>
    </div>
</div>

我希望按以下顺序删除它:

1. child 1
2. child 2
3. child 3
4. child 4

Answer 1

首先使用以下递归函数构建 DOM 树的后序(也称为子优先)版本:

var nodes = [];

function generate()
{
    $(this).children().each(generate);
    nodes.push(this);
}

generate.call($('body'));

然后，按常规迭代:

var i = 0;

function loop() 
{
    $(nodes[i]).remove();
    if (++i < nodes.length) {
        setTimeout(loop, 1000);
    }
}

loop();

Demo