Question

关于以下代码

我试图在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>

JS部分

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"));
        }
    });
}

DOM Ready事件

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

Answer 1

这是我的代码可以正常工作：

<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();
});

试试吧

递归循环中的问题：JQuery

1 个答案: