如何使用JavaScript实现类名toggle切换，解决点击同一元素类名无法移除问题

问题根源 #

你代码的逻辑冲突是toggle失效的核心原因：每次触发点击事件时，你先执行了全量移除所有元素red类的操作，此时点击的目标元素上的red类已经被清除，后续执行toggle('red')就只会执行添加类的操作，永远不会触发移除逻辑，自然没法实现二次点击取消选中的效果。

修正方案 #

调整逻辑顺序，先预判当前点击元素的激活状态，再执行类名操作：

const txts = document.querySelectorAll('.txt');

const txtColor = (txt) => {
  txt.addEventListener('click', e => {
    if (e.target.classList.contains('txt')) {
      // 先记录当前元素是否已经激活
      const isRed = e.target.classList.contains('red');
      // 清空所有元素的激活状态
      txts.forEach(txt => txt.classList.remove('red'));
      // 只有原本未激活的元素才添加激活类，原本激活的元素清空后就不再添加，实现切换效果
      if (!isRed) {
        e.target.classList.add('red');
      }
    }
  });
}

txtColor(document.querySelector('ul'));

对应HTML结构保持不变即可：

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

内容的提问来源于stack exchange，提问作者Duy Nguyễn Khánh