JavaScript技术问题：无法移除通过JS动态添加的类

可能的原因及验证步骤 #

• this指向异常：箭头函数的this继承自外层上下文，但如果事件绑定过程中this.nav指向了错误元素，会导致移除操作无效。在two的点击回调里加日志验证：

  two.addEventListener('click', ()=> {
      console.log('当前操作的nav元素:', this.nav);
      console.log('是否包含blue类:', this.nav.classList.contains('blue'));
      this.nav.classList.remove("blue");
      this.nav.classList.add("red");
  });
  

  如果contains('blue')返回false，说明当前this.nav不是你之前添加blue类的元素——比如页面有多个.nav元素，querySelector只取了第一个，但实际操作的是另一个。

• 类名存在隐藏字符：检查add("blue")里的类名是否有空格、全角字符或大小写错误（比如实际加的是Blue但移除的是blue），这种情况开发者工具里看起来是blue，但实际有不可见字符。

• 其他脚本干扰：页面中可能有其他脚本在你移除blue类后又重新添加。可以在移除后立刻打印classList，看blue是否真的被移除，再检查后续DOM操作脚本。

快速解决方案 #

如果确认this.nav是正确元素，可尝试用classList.replace简化操作（仅当blue存在时替换为red）：

two.addEventListener('click', ()=> {
    this.nav.classList.replace('blue', 'red');
    // 若需确保red类必存在，可追加：
    // this.nav.classList.add('red');
});

或者手动处理类列表（保留其他原有类）：

two.addEventListener('click', ()=> {
    const currentClasses = [...this.nav.classList].filter(c => c !== 'blue');
    this.nav.className = [...currentClasses, 'red'].join(' ');
});

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