js递归删除所有子元素

Question

js递归删除所有子元素

碰到递归的问题没有写终止递归条件的思路，大家可以说下大概处理思路吗？谢谢！

相关代码

<button class="btn btn-sm btn-success" data-pid="0" data-id="1">1</button>
<button class="btn btn-sm btn-success" data-pid="1" data-id="4">11</button>
<button class="btn btn-sm btn-success" data-pid="4" data-id="7">111</button>
<button class="btn btn-sm btn-success" data-pid="1" data-id="5">12</button>
<button class="btn btn-sm btn-success" data-pid="1" data-id="6">13</button>
<button class="btn btn-sm btn-success" data-pid="0" data-id="2">2</button>
<button class="btn btn-sm btn-success" data-pid="0" data-id="3">3</button>
<script>
    function remove_child(elem,id,pid=0){
        console.log($(elem+"[data-id='"+id+"']").text()+'开始:');
        if(pid>0){
            console.log($(elem+"[data-id='"+id+"']").text()+' remove id='+id);
            $(elem+"[data-id='"+id+"']").remove();
        }
        if($(elem+"[data-pid='"+id+"']").length>0){
            var child_elem = $(elem+"[data-pid='"+id+"']");
            for (i = 0; i < child_elem.length; i++){
                console.log(child_elem.eq(i).text()+'循环:'+i);
                remove_child(elem,child_elem.eq(i).attr("data-id"),child_elem.eq(i).attr("data-pid"));
            }
        }else{
            if(pid>0){
                console.log($(elem+"[data-id='"+id+"']").text()+' remove-id='+id);
                $(elem+"[data-id='"+id+"']").remove();
            }
            return ;
        }
    }
    remove_child('button',1);
</script>

输出

1开始:
11循环:0
11开始:
11 remove id=4
111循环:0
111开始:
111 remove id=7
remove-id=7
13循环:2
13开始:
13 remove id=6
remove-id=6

终止递归i=2了，导致跳过12了，代码如何调整？

Answer 1

你用的是 jQuery 吧 ....

for (i = 0; i < child_elem.length; i++){

你这个 i 没有声明过，于是是一个全局的 i ，也就是说所有的递归调用的 remove_child 共享同一个 i 。递归调用修改的 i 的值，于是循环就调过元素了。

改成 for (let i = 0; i < child_elem.length; i++){ 让每个函数使用自己 i 就可以了。

Answer 2

function remove_child(elem,id){
        if($(elem+"[data-pid='"+id+"']").length>0){
            var child_elem = $(elem+"[data-pid='"+id+"']");
            for (let i = 0; i < child_elem.length; i++){
                remove_child(elem,child_elem.eq(i).attr("data-id"));
            }
            child_elem.remove();
        }else{
            if($(elem+"[data-id='"+id+"']").attr('data-pid')>0){
                $(elem+"[data-id='"+id+"']").remove();
            }
        }
}

受教了，查看下var 和let的区别，上面是我冷静下自己改的，有时间脑子想糊涂了什么思路都没