Traté de diseñar algún elemento haciendo clic en ellos dándoles una clase. Solo uno en el que haga clic tendrá el estilo. Pero si hago clic en el elemento dos veces, la clase no se eliminará. Yo uso alternar, pero todavía no funciona
const lists = document.querySelectorAll('.list'); lists.forEach(list => { list.addEventListener('click', () => { // remove the previous class active lists.forEach(list => list.classList.remove("active")) list.classList.toggle('active'); }); }); .list.active { color: crimson; } <ul> <li class="list">Lorem ipsum dolor sit.</li> <li class="list">Lorem ipsum dolor sit.</li> <li class="list">Lorem ipsum dolor sit.</li> <li class="list">Lorem ipsum dolor sit.</li> </ul>.classList.remove() no especifica ninguna clase para eliminar..classList.remove('active')list.classList.toggle('active'); nunca alternará la clase active . Será lo mismo que list.classList.add('active'); Si realmente quieres alternar la clase active , hazlo
document.querySelectorAll('#list > li').forEach( (list_el,_,all) => { list_el.onclick =_=> { if ( list_el.classList.toggle('active') ) all.forEach( li => li.classList.toggle('active', list_el===li )) } }) #list > li { cursor : pointer; } .active { color: crimson; } <ul id="list"> <li>Lorem ipsum dolor sit.</li> <li>Lorem ipsum dolor sit.</li> <li>Lorem ipsum dolor sit.</li> <li>Lorem ipsum dolor sit.</li> </ul>listas.forEach(lista => lista.classList.remove("activo"))
no necesita esta parte ya que alternar ('activo') eliminará la clase cuando haga clic dos veces
const lists = document.querySelectorAll('.list'); lists.forEach(list => { list.addEventListener('click', () => { // remove the previous class active list.classList.toggle('active'); }); }); .list.active { color: crimson; } <ul> <li class="list">Lorem ipsum dolor sit.</li> <li class="list">Lorem ipsum dolor sit.</li> <li class="list">Lorem ipsum dolor sit.</li> <li class="list">Lorem ipsum dolor sit.</li> </ul>