Javascript 递归循环中的问题：JQuery

关于以下代码

我试图在Js中递归删除角色及其子角色。在下面的Html中：data id=“2”是RoleID，data parentid=“1”是父角色

问题

当调试器到达最后一行时，它不会返回到循环中已遍历的父行

我遗漏了什么吗

Html部分

<table id="RoleList" class="table table-bordered">
    <tbody>         
        <tr data-id="15">
            <td>under first</td>
            <td>first</td>
            <td>Yes</td>
            <td>
                <button class="DeleteRole btn btn-primary btn-xs">Delete</button>
            </td>
        </tr>
        <tr data-id="16" data-parentid="15">
            <td>Second</td>
            <td>under first</td>
            <td>Yes</td>
            <td>
                <button class="DeleteRole btn btn-primary btn-xs">Delete</button>
            </td>
        </tr>
        <tr data-id="17" data-parentid="16">
            <td>under second</td>
            <td>Second</td>
            <td>Yes</td>
            <td>
                <button class="DeleteRole btn btn-primary btn-xs">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

function RemovedDeletedRoles(RoleID) {
    var Roles = $("#RoleList").find("tr[data-parentID='" + RoleID + "']");
    $.each(Roles, function(index, row) {
        var ID = $(row).attr("data-id");
        var childRoles = $("#RoleList").find("tr[data-parentID='" + ID + "']");
        if(childRoles.length === 0) {
            $(row).remove();
        }
        else {
            RemovedDeletedRoles($(row).attr("data-id"));
        }
    });
}

$(document).on("click", ".DeleteRole", function() {
    var deleteButton = $(this);
    var roleID = $(deleteButton).parent().parent().attr("data-id");
    RemovedDeletedRoles(roleID);
    $(deleteButton).parent().parent().remove();
});

DOM就绪事件

<table id="RoleList" class="table table-bordered">
    <tbody>         
        <tr data-id="15">
            <td>under first</td>
            <td>first</td>
            <td>Yes</td>
            <td>
                <button class="DeleteRole btn btn-primary btn-xs">Delete</button>
            </td>
        </tr>
        <tr data-id="16" data-parentid="15">
            <td>Second</td>
            <td>under first</td>
            <td>Yes</td>
            <td>
                <button class="DeleteRole btn btn-primary btn-xs">Delete</button>
            </td>
        </tr>
        <tr data-id="17" data-parentid="16">
            <td>under second</td>
            <td>Second</td>
            <td>Yes</td>
            <td>
                <button class="DeleteRole btn btn-primary btn-xs">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

function RemovedDeletedRoles(RoleID) {
    var Roles = $("#RoleList").find("tr[data-parentID='" + RoleID + "']");
    $.each(Roles, function(index, row) {
        var ID = $(row).attr("data-id");
        var childRoles = $("#RoleList").find("tr[data-parentID='" + ID + "']");
        if(childRoles.length === 0) {
            $(row).remove();
        }
        else {
            RemovedDeletedRoles($(row).attr("data-id"));
        }
    });
}

$(document).on("click", ".DeleteRole", function() {
    var deleteButton = $(this);
    var roleID = $(deleteButton).parent().parent().attr("data-id");
    RemovedDeletedRoles(roleID);
    $(deleteButton).parent().parent().remove();
});

---

这是我的代码，工作良好：

<table id="RoleList" class="table table-bordered">
    <tbody>         
        <tr data-id="15">
            <td>under first</td>
            <td>first</td>
            <td>Yes</td>
            <td>
                <button class="DeleteRole btn btn-primary btn-xs">Delete</button>
            </td>
        </tr>
        <tr data-id="16" data-parentid="15">
            <td>Second</td>
            <td>under first</td>
            <td>Yes</td>
            <td>
                <button class="DeleteRole btn btn-primary btn-xs">Delete</button>
            </td>
        </tr>
        <tr data-id="17" data-parentid="16">
            <td>under second</td>
            <td>Second</td>
            <td>Yes</td>
            <td>
                <button class="DeleteRole btn btn-primary btn-xs">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

//direction 0:remove children, 1:remove parents
function RemoveRoles(roleId, direction) {
        direction=direction || 0; //remove by defautl remove children
        //alert("RoleId:"+roleId+" - direction->"+(direction==0?"children":"parents"));
        var $tr=$("#RoleList").find("tr[data-id='" + roleId + "']");
    var parentId=$tr.data("parentid");  
    var itemsToRemove = [];
    if(direction==0){
        itemsToRemove=$("#RoleList").find("tr[data-parentid='" + roleId + "']");
    }else{   
        itemsToRemove=$("#RoleList").find("tr[data-id='" + parentId + "']");
    }
    //alert(itemsToRemove.length);
    $tr.remove();
    $.each(itemsToRemove, function(index, item) {    
        var id = $(item).data("id");            
        RemoveRoles(id, direction);        
    });
}

$(document).on("click", ".DeleteRole", function() {
    var deleteButton = $(this);
    var roleID = $(deleteButton).parent().parent().attr("data-id");
    RemoveRoles(roleID, 1);
    $(deleteButton).parent().parent().remove();
});

首先
第一
对
删去
第二
首先
对
删去
次等
第二
对
删去
//方向0：删除子项，1：删除父项
功能（角色ID，方向）{
方向=方向| | 0；//按defautl删除子项
//警报（“RoleId:+RoleId+”-方向->“+（方向==0？”子项）：“父项”）；
var$tr=$（“#RoleList”）.find（“tr[data id='”+roleId+']）；
var parentId=$tr.data（“parentId”）；
var itemsToRemove=[]；
如果（方向==0）{
itemsToRemove=$（“#RoleList”）.find（“tr[data parentid='”+roleId+']）；
}否则{
itemsToRemove=$（“#RoleList”）.find（“tr[data id='”+parentId+']）；
}
//警报（itemsToRemove.length）；
$tr.remove（）；
$.each（itemsToRemove，函数（索引，项）{
变量id=$（项目）.data（“id”）；
拆卸孔（id、方向）；
});
}
$（文档）。在（“单击”，“删除角色”，函数（）上）{
var deleteButton=$（此项）；
var roleID=$（deleteButton.parent（）.parent（）.attr（“数据id”）；
去除孔（roleID，1）；
$（deleteButton）.parent（）.parent（）.remove（）；
});

---

试试看

代码试图做什么？最终的HTML应该是什么样子？它应该移除整张桌子？是的，它应该最终移除整张桌子。如果您需要更多信息，请告诉我。非常感谢您详细检查此问题。如果我单击ID为16的删除按钮，会发生什么情况？如果您单击

，它会删除所有表。如果您删除

，它应该删除

，因此-
是一个表行。是否要删除id大于的所有条目？17岁不是16岁的孩子，从技术上讲是身体的孩子