Wie Klasse aus Geschwistern eines Elements ohne JQuery entfernen?

Question

Ich füge eine Klasse zu einem Element hinzu und möchte es von Geschwistern entfernen. In JQuery ist es einfach, aber wie man es am besten in einfachem JS macht? Hier ist ein Beispiel meines Codes.

<div class="controllers"> 
    <span id='one' class='active'></span> 
    <span id='two'></span> 
    <span id='three'></span> 
</div> 

firstBtn.onclick = function() { 
    slides[0].className = 'slide active'; 
    this.className = 'active'; 
}; 

Answer 1

Um eine Klasse von Geschwister

var el = document.getElementById("two"); 
var one = el.previousSibling(); 
one.classList.remove("active"); 

Verwendung previousSibling oder nextSibling zu entfernen, um es und verwenden classList.remove zu entfernen, um eine Klasse zu durchqueren.

Answer 2

Sie können das Loop innerhalb des Klickereignisses verwenden, um die Klasse active von allen Elementen zu entfernen und sie dann erneut auf das angeklickte Element zu setzen.

var el = document.querySelectorAll('.controllers span'); 
 
for (let i = 0; i < el.length; i++) { 
 
    el[i].onclick = function() { 
 
    var c = 0; 
 
    while (c < el.length) { 
 
     el[c++].className = 'slide'; 
 
    } 
 
    el[i].className = 'slide active'; 
 
    }; 
 
}

.active { 
 
    color: red; 
 
}

<div class="controllers"> 
 
    <span id='one' class='active'>Lorem</span> 
 
    <span id='two'>Lorem</span> 
 
    <span id='three'>Lorem</span> 
 
</div>