如果我们只知道 className 的一部分，如何删除 className？答案

【问题标题】：How to remove className if we know only the part of className?如果我们只知道 className 的一部分，如何删除 className？
【发布时间】：2023-04-09 07:03:02
【问题描述】：

例如 - 我只有下一行代码，如果span 包含从outcome--active 开始的一些class，我需要重新确认。如果是这样 - 请通过 JS 将其删除。

<span class="outcome___259Az outcome--active___1Ffc-"></span>

有什么想法可以实现吗？

我尝试了下一个，但它不起作用：

document.querySelector('[class^="outcome"]').classList.remove(/outcome--active/g)

【问题讨论】：

可能（jquery）重复：stackoverflow.com/questions/2644299/jquery-removeclass-wildcard
@TemaniAfif 我确实需要 jQuery 解决方案！纯JS
@TemaniAfif 他正在使用香草 javascript。不是 jquery
这就是为什么我只说 可能的 jquery 重复 ...我没有关闭问题，jQuery 方法可能会引起其他人的兴趣，它可能会为任何 JS 实现提供想法
@patelarpan 我知道，但我没有关闭 :) 我很清楚，这是一个 jQuery 方法的副本......供将来参考

标签： javascript html css

【解决方案1】：

不幸的是，根据MDN docs <element>.classList.remove() 方法需要一个 <string> 参数并且它不接受 <RegExp>。

因此，您可以通过删除以 outcome--active<something> 开头的类来简单地替换元素的整个 className

let outcome = document.querySelector('[class^="outcome"]')
outcome.className = outcome.className.replace(/\boutcome--active.+?/g, '');

Codepen demo

【讨论】：

这将只针对其类属性正好以"outcome" 开头的元素，如果之前设置了其他类，甚至只是一个空格，则它不会匹配。此外，在您的 codepen 中，规则 [class="outcome--active___1Ffc-"] 永远不会匹配，:not([class="outcome--active___1Ffc-"]) 总是匹配，无论是否是 js。
事实上。 codepen 显示该类已被正确删除，而其他类已保留
不，这并没有表明我的意思。您的元素的类属性永远不会设置为字符串"outcome--active___1Ffc-"。你可以写:not(*){color:red}*{color:green}，它会做同样的事情。
...尝试删除你的 js。有红色的吗？
好的，我明白了，只是在我的 css 中忘记了~，但代码按预期工作。（去掉js，现在span是红色的）

【解决方案2】：

使用以下函数，您可以通过知道类名的一部分从类列表中删除所需的类：

function removeClassByString( part ) {
    var elements = document.getElementsByTagName( 'span' );

    for ( var i = 0; i < elements.length; i++ ) {
        var classList = elements[i].className.split( ' ' );
        var count = classList.length;

        for ( var j = 0; j < count; j++ ) {
            if ( classList[j].search( part ) != -1 ) {
                delete classList.splice( j, 1 )
            }
        }

        if ( count != classList.length ) {
            var el = document.createElement( 'i' );
            el.innerText = '         (class removed!)'
        } else {
            var el = document.createElement( 'i' );
            el.innerText = '  (no change)'
        }

        elements[i].appendChild( el );

        elements[i].className = classList.join( ' ' )
    }
}

span {
    display: block;
    font: normal 1em "Lucida Console", Monaco, monospace
}
i {
    color: green
}
.outcome--active___1Ffc- {
    color: red
}

<span class="outcome--active___1Ffc-">The phrase exists in the class name.</span>
<span class="outcome___259Az">The phrase does'nt exist in the class name.</span>
<span class="outcome___259Az outcome">The phrase does'nt exist in the class name.</span>
<span class="outcome___259Az outcome--active___1Ffc-">The phrase exists in the class name.</span>
<br />
<input name="" type="button" value="Remove Class" onclick="removeClassByString( 'outcome--active' )" />

【讨论】：

【解决方案3】：

<span class="outcome___259Az outcome--active___1Ffc-"></span>

<script>

// List with span's classes
var classList = document.querySelector('[class^="outcome"]').classList;

//  List with classes to remove
var removeClassList = [];

//  Get classes that matches with regexp
classList.forEach( function(value) {
    var result = /([^ ]*)(outcome--active)([^ ]*)/g.test(value);
  if(result){
    removeClassList.push(value);
  }
});

//  Remove classes that matches with regexp from span
removeClassList.forEach( function(value) {
    document.querySelector('[class^="outcome"]').classList.remove(value);
});
</script>

【讨论】：

【解决方案4】：

你可以这样做。

将您的类拆分为一个数组
使用 javascript some 方法测试特定类是否可用。
如果可用，则删除该元素。

if(document.querySelector('[class^="outcome"]').className.split(' ').some(c => /outcome--/g.test(c) )) {
    document.querySelector('[class^="outcome"]').remove();
}

&lt;span class="outcome___259Az outcome--active___1Ffc-"&gt;test&lt;/span&gt;

【讨论】：