Question

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

这是我试过的：

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

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

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

Answer 2

正如评论中所讨论的，重置嵌套循环中i变量的值存在问题。我冒昧地编写了代码，就像我编写代码一样。因为你已经在使用它，所以我查了一些东西。（此代码假设您可以定位IE 9或更高版本，因此使用Array.prototype.forEach并且该机架也是一个数组，这似乎与原始数据相同。）

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的样子，但希望这会让你在未来的路上走得更远。

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

2 个答案: