如何使用for循環刪除父節點中的子節點（html div）

Question

所以即時嘗試從其父節點中刪除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

正如評論中所述，在嵌套循環中重置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是什麼樣子，但希望這可以讓你更進一步。

Answer 2

你已經創建了嵌套for循環與var i=0相同，這可能是你的問題。

而另一點我想指出的是，如果racks是一個數組，你最好不要使用for(var i in racks)因爲它會掃描你的Array.prototype所有其他的原型屬性，這取決於你在你的頁面中使用哪些庫。並且如果racks不是數組，它將掃描Object.prototype中的所有其他屬性，我的意思是，如果它只是使用for(var i in racks)的迭代是不安全的，因爲添加一個新的Javascript庫可能會混淆您的代碼。