Intenté agregar una clase al contenedor de texto en el que hago clic y luego la clase asigna un color al texto en el que hago clic. el problema es que cuando hago clic en el mismo texto dos veces, la clase no se eliminará. ¿Alguna solución para este caso?
POR FAVOR NO CAMBIEN DONDE ES LA CLASE
const contain = document.querySelector('.contain'); const inConts = document.querySelectorAll('.in-cont'); contain.addEventListener('click', e => { for (inCont of inConts) { inCont.classList.remove('red'); } if (e.target.classList.contains('txt')) { e.target.parentElement.classList.toggle('red'); } }); .in-cont.red .txt { color: red; } <div class="contain"> <div class="in-cont"> <p class="txt">Lorem ipsum dolor sit.</p> </div> <div class="in-cont"> <p class="txt">Lorem ipsum dolor sit.</p> </div> <div class="in-cont"> <p class="txt">Lorem ipsum dolor sit.</p> </div> </div>Puede alternar fácilmente la clase red usando la closest como:
closestbusca en el DOM hacia arriba un elemento que coincida con el selector. Esta búsqueda incluye el propio elemento.
element.closest(selector)Si encuentra un elemento que coincide con el selector, devuelve el elemento. Si no encuentra ningún elemento, devuelve
null
const contain = document.querySelector('.contain'); const inConts = document.querySelectorAll('.in-cont'); contain.addEventListener('click', e => { if (e.target.closest("div.contain")) { e.target.closest("div.in-cont").classList.toggle("red") } }); .in-cont.red .txt { color: red; } <div class="contain"> <div class="in-cont"> <p class="txt">Lorem ipsum dolor sit.</p> </div> <div class="in-cont"> <p class="txt">Lorem ipsum dolor sit.</p> </div> <div class="in-cont"> <p class="txt">Lorem ipsum dolor sit.</p> </div> </div>Al eliminar la clase red , verifique si inCont contiene el objetivo del evento:
const contain = document.querySelector('.contain'); const inConts = document.querySelectorAll('.in-cont'); contain.addEventListener('click', e => { for (inCont of inConts) { if (!inCont.contains(e.target)) { inCont.classList.remove('red'); } } if (e.target.classList.contains('txt')) { e.target.parentElement.classList.toggle('red'); } }); .in-cont.red .txt { color: red; } <div class="contain"> <div class="in-cont"> <p class="txt">Lorem ipsum dolor sit.</p> </div> <div class="in-cont"> <p class="txt">Lorem ipsum dolor sit.</p> </div> <div class="in-cont"> <p class="txt">Lorem ipsum dolor sit.</p> </div> </div>