JQueryなしで要素の兄弟からクラスを削除するには？

Question

私は要素にクラスを追加しており、それを兄弟から削除したいと考えています。 JQueryではシンプルですが、単純なJSの中でどのように最良の方法を実行するのですか？ ここに私のコードの例があります。

<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

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

それに横断するpreviousSibling又はnextSiblingを使用し、クラスを削除するためにclassList.removeを使用兄弟からクラスを削除します。

Answer 2

クリックイベント内でループを使用して、すべての要素からactiveクラスを削除し、再度clicked要素に設定することができます。

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>