Perché removeChild () mi impediscono di fare appendChild () all'interno di una funzione JavaScript?

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

  •  16-09-2019
  •  | 
  •  

Domanda

In questo codice quando chiamo il cleanGrid () Funzione il mio obiettivo era quello di sbarazzarsi del div che era di prima classe 'cerchio' e di sostituirlo con un div con classe di 'piazza'. Per quello che sto veramente usando questo codice per essi non sono elementi sostituibili in modo replaceChild () non avrebbe funzionato. Se io commento la chiamata di funzione a cleanGrid () il codice funziona benissimo e il pulsante aggiunge solo un div con classe di 'piazza' per ogni clic. Quello che voglio che accada in realtà è per cleanGrid () per rimuovere tutto ciò che è nel div 'grid' e lasciare spazio per tutto ciò va aggiunto dopo questa funzione viene chiamata - ma nulla può essere aggiunto dopo questa funzione viene chiamata e io sono non so perché. 

<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>
È stato utile?

Soluzione

Non credo che la vostra funzione cleanGrid funziona piuttosto il modo in cui hai codificato esso. x.childNodes continuerà ad essere truthy anche se è vuota (a NodeList vuoto non è falsey). Così ho il sospetto che è un'eccezione (la chiamata removeChild) o all'infinito looping, che (in entrambi i casi) è il motivo per altro codice non è in esecuzione. Provate a lanciare in un ambiente di debug (Firefox + Firebug, IE + Visual Studio o il toolkit dev, altro) dove si può vedere cosa sta succedendo.

Ecco un rielaborazione off-the-bracciale di cleanGrid: 

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

O, naturalmente: 

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

... dal innerHTML, anche se non di serie, è supportato da tutti i principali browser e la maggior parte dei minori.

Altri suggerimenti

T.J. Crowder inchiodato giù con la logica dietro il comportamento

Tuttavia, questo funzionerà: 

function cleanGrid() {
 var x = document.getElementById("grid");
 var len =x.childNodes.length;
 while(len) {
  x.removeChild(x.lastChild);
 --len;
 }
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top