How to remove child (html div) from parentnode with for loop

Question

So im trying to remove HTML div's from it's parent div. I have a div which contains the div that need to be removed, selectedDivs. However my current function refuses to remove more then 1 item from it's parent div...

Here's what i tried:

Console output: 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

you have created nested for loops with the same var i=0 , It could be your problem.

And the other point I like to point out is, if racks is an array you'd better not use for(var i in racks) because it would scan all other prototype attributes in your Array.prototype , which depends on what libraries you have used in your page. and If racks is not an array, it would scan all other properties in your Object.prototype , what I mean is, if it is just a iteration using for(var i in racks) is not safe, because adding a new Javascript library could mess with your code.

Answer 2

As discussed in the comments, there's a problem with resetting the value of the i variable within the nested loop. I took the liberty of editing the code to the way I would write it. I jQueried up some things since you're already using it anyway. (This code assumes you can target IE 9 or later and thus use Array.prototype.forEach and also that racks is an array, which seemed to be the case from the original.)

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

I didn't have a chance to test this in real code since we still don't know what racks looks like, but hopefully this gets you further down the road.