En javascript, estoy tratando de aplicar una clase 'activa' al hacer clic en un botón. Sin embargo, me gustaría eliminar la clase del botón que la tenía anteriormente. No estoy seguro de cuál es la mejor manera de abordar esto. Estaba considerando algo que involucrara un segundo bucle después del clic, pero eso parece algo complicado, y probablemente haya una mejor manera. Aquí está el código que tengo para agregar la clase, pero nuevamente, no estoy seguro de cuál es la mejor manera de eliminarlo del botón al que se aplicó previamente.
const giftcards = document.querySelectorAll('.giftcard'); for(let giftcard of giftcards){ giftcard.onclick = () => { giftcard.classList.add('active'); } }Si siempre hay como máximo una tarjeta de .giftcard con una clase active , puede consultar esa tarjeta de regalo antes de configurarla como active en la que se ha hecho clic actualmente usando document.querySelector('.giftcard.active') y utilizar el encadenamiento opcional (?.) para eliminar la clase active solo si se encontró un elemento.
const giftcards = document.querySelectorAll('.giftcard'); for (let giftcard of giftcards) { giftcard.onclick = () => { document.querySelector('.giftcard.active')?.classList.remove('active'); giftcard.classList.add('active'); } } .active { color: red; } <div class="giftcard">card 1</div> <div class="giftcard">card 2</div><div> <button class="giftcard">Button 1</button> <button class="giftcard">Button 1</button> <button class="giftcard">Button 1</button> </div> <script> const giftcards = document.querySelectorAll(".giftcard"); giftcards.forEach((giftcard) => { giftcard.addEventListener("click", () => { giftcardClick(giftcard); }); }); function giftcardClick(giftcard) { giftcards.forEach((giftcard) => { giftcard.classList.remove("active"); }); giftcard.classList.add("active"); } </script>