For Schleife wiederholt nur einmal beim Versuch, Klassen aus Elementen zu entfernen

Question

In Javascript habe ich eine Funktion, die die Elemente auf der Seite finden sollte, die die "connected" -Klasse haben, und wenn eine Schaltfläche angeklickt wird die Klassen für diese Elemente gelöscht . Ich habe diesen Code geschrieben:

var prev_connected = document.getElementsByClassName("connected"); 
if (prev_connected.length > 0) { 
    for (var j = 0; j < prev_connected.length; j++) { 
     prev_connected[j].removeAttribute("class"); 
    } 
} 

Es ist jedoch immer nur löscht das Klassenattribut des ersten „verbunden“ Element auf der Seite. Wenn ich zwei "verbundene" Elemente habe, habe ich bestätigt, dass das Array "prev_connected" 2 Werte enthält, aber aus irgendeinem Grund erreicht die for-Schleife niemals den zweiten. Gibt es etwas, was ich falsch mache? Vielen Dank.

Answer 1

Das Ergebnis getElementsByClassName ist live, was bedeutet, dass, wie Sie die Klasse entfernen Attribut wird es auch dieses Element aus dem Ergebnis entfernen . Die Verwendung von querySelectorAll wird weiter unterstützt und gibt eine statische NodeList zurück.

Sie können die Liste auch leichter mit einer for ... in-Schleife durchlaufen.

Ich würde nicht empfehlen, eine zusätzliche Kopie der Live-Liste, nur um es statisch zu machen, sollten Sie eine Methode verwenden, die stattdessen eine statische NodeList zurückgibt.

var prev_connected = document.querySelectorAll(".connected"); 
 
document.getElementById('demo').onclick = function() { 
 
    for(var i in Object.keys(prev_connected)) { 
 
     prev_connected[i].removeAttribute("class"); 
 
    } 
 
}

.connected { 
 
    background: rgb(150,200,250); 
 
}

<div class="connected">Hello</div> 
 
<div class="connected">Hello</div> 
 
<div class="connected">Hello</div> 
 
<div class="connected">Hello</div> 
 
<div class="connected">Hello</div> 
 
<button id="demo">Remove the classes!</button>

Answer 2

Dies ist aufgrund prev_connected eine Live-Nodelist. Wenn Sie das Element mit dieser Klasse aktualisieren, wird es aus der Nodelist entfernt, was bedeutet, dass die Länge der Nodelist um eins reduziert wird, was bedeutet, dass j versucht, Element 2 in einer Nodelist der Länge 1 zu finden, weshalb es nach dem ersten nicht funktioniert Iteration.

Sie können dies in der Konsole in this demo geschehen sehen.

Eine Möglichkeit, dieses Problem beheben kann, ist durch die Nodelist in ein Array konvertieren:

var prev_connected = [].slice.call(document.getElementsByClassName("connected")); 

Answer 3

Sie in die entgegengesetzte Richtung und elem[i].classList.remove('name') verwenden iterieren sollte von jedem Element Klassennamen Demo

document.getElementById("button").onclick = function() { 
    var prev_connected = document.getElementsByClassName("connected"); 
    console.log(prev_connected); 
    for (var i = prev_connected.length - 1; i >= 0; i--) { 
     prev_connected[i].classList.remove("connected"); 
     console.log(i, prev_connected[i - 1]); 
    } 
} 

Es gibt weitere Antworten zum Entfernen: https://stackoverflow.com/a/14409442/4365315