如何使用 for 循环从父节点中删除子节点（html div）

Question

所以我试图从它的父 div 中删除 HTML div。 我有一个 div，其中包含需要删除的 div，selectedDivs。 但是我当前的函数拒绝从它的父 div 中删除超过 1 个项目...

这是我尝试过的：

控制台输出：http://pastebin.com/KCeKv1pG

var selectedDivs = new Array();
canvas.innerHTML  += "<div id="+currDev+" class='DRAGGABLE' onClick='addBorder(this)>" + "<img src='/devices/" + device + ".gif'></img></div>";

 function addBorder(e) {
if (ctrlBeingpressed == true) { 
  selectedDivs.push(e);
  e.style.border = "2px dotted black";
}

}

function deleteSelected() {
            console.log(selectedDivs);
            var len = selectedDivs.length;
            for (var i = 0, len; i < len; i++){
            console.log("before html remove: " + selectedDivs.length);
            var node = selectedDivs[i];
            node.parentNode.removeChild(node);
            console.log("after html remove: " + selectedDivs.length);
                 for (var i in racks)
                 {
                 console.log(i);
                     if(node.id == racks[i].refdev)
                     {
                     console.log("Found in rack");
                        for (z = 1; z < racks[i].punkt.length; z++)
                        {
                            if(racks[i].punkt[z] != undefined)
                            {
                                if(racks[i].punkt[z].y.indexOf("S") > -1) //If it's an already defined point at an S card
                                {
                                    //Clearing the TD 
                                    $("#sTab tr:eq("+(cardsS.indexOf(racks[i].punkt[z].y)+1)+") td:eq("+(racks[i].punkt[z].x-1)+")").html("&nbsp;");
                                    $("#sTab tr:eq("+(cardsS.indexOf(racks[i].punkt[z].y)+1)+") td:eq("+(racks[i].punkt[z].x-1)+")").css("background-color","#E6E6E6");
                                }
                                else // Then it must be a P or V card
                                {
                                    $("#pvTab tr:eq("+(cardsPV.indexOf(racks[i].punkt[z].y)+1)+") td:eq("+(racks[i].punkt[z].x-1)+")").html("&nbsp;");
                                    $("#pvTab tr:eq("+(cardsPV.indexOf(racks[i].punkt[z].y)+1)+") td:eq("+(racks[i].punkt[z].x-1)+")").css("background-color","#E6E6E6");
                                }
                            }
                        }
                         console.log("Found in rack, breaking this loop");
                        delete racks[i];
                        break;
                     }
                 }
            }

Answer 1

正如 cmets 中所讨论的，在嵌套循环中重置 i 变量的值存在问题。我冒昧地将代码编辑为我编写它的方式。我查询了一些东西，因为你已经在使用它了。 （此代码假设您可以针对 IE 9 或更高版本，因此使用 Array.prototype.forEach 并且 racks 是一个数组，这似乎是原始的情况。）

var selectedDivs = [];
$(canvas).append("<div id="+currDev+" class='DRAGGABLE' onClick='markSelected(this)'><img src='/devices/" + device + ".gif'></img></div>");

function markSelected(div) {
    if (ctrlBeingpressed == true) { 
      selectedDivs.push(div);
      $(div).css("border", "2px dotted black");
  }
}

function deleteSelected() {
    var i, z, deletedDivIDs = [];
    console.log(selectedDivs);
    selectedDivs.forEach(function(selectedDiv, index, selectedDivs) {
        console.log("Removing", selectedDiv, "at index", index);
        divIDs.push(selectedDiv.id);
        selectedDiv.parentNode.removeChild(selectedDiv);
    });
    racks.forEach(function(rack, index, racks) {
        console.log(i);
        if(deletedDivIDs.indexOf(rack.refdev) !== -1) {
            console.log("Found in rack");
            for (z = 1; z < rack.punkt.length; z++) {
                if(rack.punkt[z] !== undefined) {
                    if(rack.punkt[z].y.indexOf("S") > -1) {//If it's an already defined point at an S card
                        //Clearing the TD 
                        $("#sTab tr:eq("+(cardsS.indexOf(rack.punkt[z].y)+1)+") td:eq("+(rack.punkt[z].x-1)+")").css("background-color","#E6E6E6").empty();
                    }
                    else { // Then it must be a P or V card
                        $("#pvTab tr:eq("+(cardsPV.indexOf(rack.punkt[z].y)+1)+") td:eq("+(rack.punkt[z].x-1)+")").css("background-color","#E6E6E6").empty();
                    }
                }
            }
            racks[rack] = undefined;
        }
    });
}

我没有机会在实际代码中对此进行测试，因为我们仍然不知道 racks 是什么样的，但希望这能让您走得更远。

Answer 2

您创建了具有相同 var i=0 的嵌套 for 循环，这可能是您的问题。

我想指出的另一点是，如果racks 是一个数组，您最好不要使用for(var i in racks)，因为它会扫描您的Array.prototype 中的所有其他原型属性，这取决于您使用什么库已在您的页面中使用。如果racks不是一个数组，它会扫描你Object.prototype中的所有其他属性，我的意思是，如果它只是使用for(var i in racks)的迭代是不安全的，因为添加一个新的Javascript库可能会搞砸你的代码。