如何仅已知类名前缀时移除对应的className？

嘿，你的问题出在classList.remove()的用法上——它不支持直接传入正则表达式，只能接受具体的类名字符串作为参数。所以你得先找出元素中符合outcome--active开头的类名，再针对性地移除它。

可行的实现代码 #

// 获取目标span元素
const targetSpan = document.querySelector('[class^="outcome"]');

// 遍历元素的所有类名，匹配前缀后移除
targetSpan.classList.forEach(className => {
  // 测试类名是否以"outcome--active"开头
  if (/^outcome--active/.test(className)) {
    targetSpan.classList.remove(className);
  }
});

代码说明 #

1. 首先通过document.querySelector('[class^="outcome"]')定位到目标span元素，这个选择器能匹配class属性以"outcome"开头的元素，和你之前的写法一致。
2. 调用classList.forEach()遍历元素的每一个类名，用正则表达式/^outcome--active/测试类名是否符合前缀要求（^表示字符串开头）。
3. 一旦找到匹配的类名，就用classList.remove()移除它。

扩展：处理多个元素的情况 #

如果页面上有多个需要处理的span元素，可以改用querySelectorAll，然后循环处理每个元素：

const spans = document.querySelectorAll('[class^="outcome"]');
spans.forEach(span => {
  span.classList.forEach(className => {
    if (/^outcome--active/.test(className)) {
      span.classList.remove(className);
    }
  });
});

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