Remove Extra Cubes-CodePudding

I am making a whiteboard (blackboard), to move cubes as counting blocks, or logic cubes, and connect them with lines to make a connect the cube logic board.

I have an initial cube, and the button in the bottom left corner expands three more cubes, but when I try to remove the expanded cubes after adding a class to the expanded cubes,('addingAndSubtractingCubes'), all three cubes are not removed from the program.

In the for loop where im cycling through the NodeList the middle cube is being skipped it seems like at allCubesAdded[i].remove() where i==1;

var initializeCube;
var addThreeCubes;
var substractLastThreeCubesAdded;
var cubeCounter = 0;
var cubeCounter02 = 0;
var cubeWriting;
var cubeDrawing;
var allCubesAdded;

function checkMouseover() {
  document.getElementById('smallButtonBottomLeftInitialCube').style.backgroundColor = "green";
}

function checkMouseout() {
  document.getElementById('smallButtonBottomLeftInitialCube').style.backgroundColor = "black";
}

function addThree() {
  cubeCounter  ;
  if (cubeCounter == 1) {
    document.getElementById('smallButtonBottomLeftInitialCube').removeAttribute('onclick');
    document.getElementById('smallButtonBottomLeftInitialCube').setAttribute('onclick', 'substractLastThreeCubesAdded()');
  }

  for (var i = 0; i < 3; i  ) {
    addThreeCubes = document.createElement('div');
    document.getElementById('CubeAside').appendChild(addThreeCubes);
    addThreeCubes.setAttribute('class', 'addingAndSubtractingCubes');
    if (i == 0) {
      addThreeCubes.style = 'box-sizing:border-box;border:3px solid green; position:absolute;top:'   14   '%;left:'   35   '%;height:50px;width:50px;background-color:black;color:green;'
    }
    if (i == 1) {
      addThreeCubes.style = 'box-sizing:border-box;border:3px solid green; position:absolute;top:'   28   '%;left:'   35   '%;height:50px;width:50px;background-color:black;color:green;'
    }
    if (i == 2) {
      addThreeCubes.style = 'box-sizing:border-box;border:3px solid green; position:absolute;top:'   42   '%;left:'   35   '%;height:50px;width:50px;background-color:black;color:green;';
    }
  }
  allCubesAdded = document.getElementsByClassName('addingAndSubtractingCubes')
}

function substractLastThreeCubesAdded() {
  for (var i = 0; i < allCubesAdded.length; i  ) {
    allCubesAdded[i].remove()
  }
}

body {
  background-color: orange
}

#CubeAside {
  box-sizing: border-box;
  border: 3px solid green;
  position: absolute;
  top: 14%;
  left: 50%;
  height: 88%;
  width: 50%;
  background-color: black;
  color: green;
}

#initialCube {
  box-sizing: border-box;
  border: 3px solid green;
  position: absolute;
  top: 14%;
  left: 50%;
  height: 50px;
  width: 50px;
  background-color: black;
  color: green;
}

#smallButtonBottomLeftInitialCube {
  box-sizing: border-box;
  border: 3px solid green;
  position: absolute;
  top: 101%;
  left: 1%;
  height: 18%;
  width: 18%;
  background-color: black;
  color: green;
}

<div id="phpFreeChatInterface">
  <?php echo 'insertPhpFreeChat'?>
</div>
<div id="CubeAside">
  <div id="initialCube"><button onm ouseover="checkMouseover()" onm ouseout="checkMouseout()" id="smallButtonBottomLeftInitialCube" onClick="addThree()">3</button></div>
</div>
<table>
  <tr><a href="index.php">Ready Set Everest</a></tr>
</table>

CodePudding user response：

remove from the end first:

var initializeCube;
var addThreeCubes;
var substractLastThreeCubesAdded;
var cubeCounter=0;
var cubeCounter02=0;
var cubeWriting;
var cubeDrawing;
var allCubesAdded;
function checkMouseover(){    
    document.getElementById('smallButtonBottomLeftInitialCube').style.backgroundColor="green";
}
    
function checkMouseout(){    
    document.getElementById('smallButtonBottomLeftInitialCube').style.backgroundColor="black";   
}    
    
function addThree(){
    cubeCounter  ;
    if(cubeCounter==1){
       document.getElementById('smallButtonBottomLeftInitialCube').removeAttribute('onclick');}
       document.getElementById('smallButtonBottomLeftInitialCube').setAttribute('onclick','substractLastThreeCubesAdded()');
    for(var i = 0;i<3;i  ){
       addThreeCubes = document.createElement('div');
       document.getElementById('CubeAside').appendChild(addThreeCubes);
       addThreeCubes.setAttribute('class','addingAndSubtractingCubes');
       
       if(i==0){
          addThreeCubes.style='box-sizing:border-box;border:3px solid green; position:absolute;top:' 14 '%;left:' 35 '%;height:50px;width:50px;background-color:black;color:green;'}
       if(i==1){
          addThreeCubes.style='box-sizing:border-box;border:3px solid green; position:absolute;top:' 28 '%;left:' 35 '%;height:50px;width:50px;background-color:black;color:green;'}
       if(i==2){
       addThreeCubes.style='box-sizing:border-box;border:3px solid green; position:absolute;top:' 42 '%;left:' 35 '%;height:50px;width:50px;background-color:black;color:green;';}
                           
    }                    
    
    allCubesAdded = document.getElementsByClassName('addingAndSubtractingCubes')
}    
                     
    
    function substractLastThreeCubesAdded(){
        
        
     //   for(var i=allCubesAdded.length-1; i > -1;i--){allCubesAdded[i].remove()}
     
     for(var i=0; i < allCubesAdded.length;i  ){
     console.log(allCubesAdded)
     allCubesAdded[i].remove()}
     console.log(allCubesAdded)
     
     console.log("NEXT")
    
    
    }

body{background-color:orange}
        #CubeAside{
            box-sizing:border-box;border:3px solid green; position:absolute;top:14%;left:50%;height:88%;width:50%;background-color:black;color:green;
        }
    
        #initialCube{
            box-sizing:border-box;border:3px solid green; position:absolute;top:14%;left:50%;height:50px;width:50px;background-color:black;color:green;
            
        }
        
        #smallButtonBottomLeftInitialCube{box-sizing:border-box;border:3px solid green; position:absolute;top:101%;left:1%;height:18%;width:18%;background-color:black;color:green;}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Php Free Chat</title>   
</head>

<body>
<div id="phpFreeChatInterface">
xxx   
</div><div id="CubeAside"><div id="initialCube"><button onm ouseover="checkMouseover()" onm ouseout="checkMouseout()" id="smallButtonBottomLeftInitialCube" onClick="addThree()">3</button></div></div>   
<table><tr><a href="index.php">Ready Set Everest</a></tr></table>   



</body>
</html>