给容器添加的类无法移除，重复点击同一文本时类不消失如何解决？

你当前的代码执行逻辑存在顺序问题：每次点击事件触发后，都会先把所有.in-cont元素的red类全部移除，再对点击目标的父元素执行toggle操作。此时父元素的red类已经被提前清空，toggle只会触发添加逻辑，自然无法实现取消选中的效果。

不需要修改类的绑定位置，只需要调整判断逻辑的执行顺序：先记录当前点击项的激活状态，再清空所有激活状态，最后根据之前记录的状态决定是否给当前项添加激活类，即可实现点击选中、重复点击取消的效果。

修改后的JavaScript代码 #

const contain = document.querySelector('.contain');
const inConts = document.querySelectorAll('.in-cont');

contain.addEventListener('click', e => {
  // 仅当点击的是txt元素时执行逻辑
  if (e.target.classList.contains('txt')) {
    const currentCont = e.target.parentElement;
    // 先记录当前容器是否已经是激活状态
    const isCurrentActive = currentCont.classList.contains('red');
    // 清空所有容器的激活类
    for (const inCont of inConts) {
      inCont.classList.remove('red');
    }
    // 如果之前未激活，现在添加激活类；如果之前已激活，清空后就不再添加，实现取消效果
    if (!isCurrentActive) {
      currentCont.classList.add('red');
    }
  }
});

• 点击非文本区域时不做任何操作
• 点击文本时先判断当前项是否已经是选中状态
• 清空所有选中状态后，只有当前项之前未选中时才添加选中类，之前已选中的就保持未选中状态，完美实现单选+点击取消的需求

内容的提问来源于stack exchange，提问作者Sham