Guarde en caché el elemento de la lista principal y los elementos de la lista, y luego adjunte un oyente al elemento de la lista para que pueda usar la delegación de eventos para capturar eventos de clics en elementos a medida que "burbujean" el DOM.

Cuando se hace clic en un elemento, elimine la clase red de todos los elementos y, según el parámetro condicional que pase para toggle , (la lista de classList contiene una clase red ) toggle la clase red .

 // Cache the elements const ul = document.querySelector('ul'); const lis = document.querySelectorAll('.txt'); // Add a listener to the list ul.addEventListener('click', handleClick, false); function handleClick(e) { // Destructure the nodeName and classList from the // the element we clicked on const { nodeName, classList } = e.target; // Check if it's a list item if (nodeName === 'LI') { // Does the list item contain a red class? const isRed = classList.contains('red'); // Remove all the red classes from all the items lis.forEach(li => li.classList.remove('red')); // And depending on the answer to `isRed` // toggle the class on or off classList.toggle('red', !isRed); } }

 .red { color: red; } .txt:hover { cursor: pointer; }

 <ul> <li class="txt">Lorem ipsum dolor.</li> <li class="txt">Lorem ipsum dolor.</li> <li class="txt">Lorem ipsum dolor.</li> </ul>

Documentación adicional

• Asignación de desestructuración

Usando jQuery, podría hacer que esto funcione.

 $('ul li').on('click', function(){ $(this).toggleClass('text') });

 .text { color:red }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="txt">Lorem ipsum dolor.</li> <li class="txt">Lorem ipsum dolor.</li> <li class="txt">Lorem ipsum dolor.</li> </ul>

Aquí está mi respuesta. Por favor vea los comentarios en cada sección.

 const txts = document.querySelectorAll('.txt'); const txtColor = (txt) => { // click on li item txt.addEventListener('click', e => { // if target contains class txt, which in case, it's hard coded // this will always return true if (e.target.classList.contains('txt')) { // remove red class for each list item with class txt // in this line, it removes every 'red' class on each list item txts.forEach(txt => txt.classList.remove('red')); // Then toggle 'red' class if it's not present on the target // Toggle does as it say, if its not present, it adds the token // if it's present, it removes it. // since the statement above ALWAYS removes the red class, // Toggle will only always add the 'red' class } e.target.classList.toggle('red'); }); } txtColor(document.querySelector('ul'));

Si tengo razón, creo que esto es lo que estás tratando de hacer.

 document.querySelector('ul').addEventListener("click", (e) => { // if target doesn't contain red class, then remove all red class from the list if(!e.target.classList.contains("red")) { document.querySelectorAll("li").forEach(e => e.classList.remove("red")) } // toggle red class to the target e.target.classList.toggle("red") })