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了，代码如何调整？