¿Por qué removeChild() me impide utilizar appendChild() dentro de una función Javascript?

StackOverflow https://stackoverflow.com/questions/1475937

  •  16-09-2019
  •  | 
  •  

Pregunta

En este código, cuando llamo a la función cleanGrid(), mi objetivo era deshacerme del div que era de clase "círculo" y reemplazarlo con un div de clase "cuadrado".Por lo que realmente estoy usando este código, no son elementos reemplazables, por lo que replaceChild() no funcionaría.Si comento la llamada a la función cleanGrid(), el código funciona bien y el botón simplemente agrega un div con la clase 'cuadrado' para cada clic.Lo que realmente quiero que suceda es que cleanGrid() elimine lo que esté en el div 'cuadrícula' y deje espacio para lo que deba agregarse después de llamar a esta función, pero no se puede agregar nada después de llamar a esta función y estoy No estoy seguro de por qué.

<body>
<div id="grid"><div class="circle">hello</div></div>
<button onclick="addSquare()">add a Square</button>

<script language="JavaScript">
var g = {};
g.myGrid = document.getElementById("grid");

function addSquare() {

 // Calling cleanGrid() is giving me problems.
 // I want to wipe everything clean first and then add the divs of the 'square' class.
 // But instead it just clears the 'grid' div and doesn't allow anything to be added.
 cleanGrid();  // WHY NOT?

 var newSquare = document.createElement("div");
 newSquare.className = "square";
 newSquare.innerHTML = "square";
 g.myGrid.appendChild(newSquare);
}

function cleanGrid() {
 var x = document.getElementById("grid");
 while(x.childNodes) {
  var o = x.lastChild;
  x.removeChild(o);
 }
}
</script>

</body>
¿Fue útil?

Solución

No creo que su función cleanGrid funcionará del modo que usted ha codificado él. x.childNodes seguirá siendo Truthy incluso si está vacío (una NodeList vacía no es Falsey-). Así que sospecho que es una excepción (en la llamada removeChild) o sin fin de bucle, que (en ambos sentidos) es por otro código no se está ejecutando. Pruebe a ejecutar en un entorno de depuración (Firefox + Firebug, IE + Visual Studio o el kit de herramientas de desarrollador, lo que sea), donde se puede ver lo que está pasando.

Aquí hay un reelaboración fuera de la manga de cleanGrid: 

function cleanGrid() {
  var x = document.getElementById("grid");
  while (x.lastChild) {
    x.removeChild(x.lastChild);
  }
}

O, por supuesto: 

function cleanGrid() {
  document.getElementById("grid").innerHTML = "";
}

... ya innerHTML, aunque no estándar, con el apoyo de todos los principales navegadores, y la mayor parte de los menores de edad.

Otros consejos

T.J.Crowder entendió la lógica detrás del comportamiento.

Sin embargo, esto funcionará:

function cleanGrid() {
 var x = document.getElementById("grid");
 var len =x.childNodes.length;
 while(len) {
  x.removeChild(x.lastChild);
 --len;
 }
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top