仅限 JavaScript - 如果存在，则删除某些类 [重复]答案

【问题标题】：JavaScript Only - Remove Certain classes if present [duplicate]仅限 JavaScript - 如果存在，则删除某些类 [重复]
【发布时间】：2015-05-03 05:38:56
【问题描述】：

我有以下类（下），它们是在 HTML 上动态添加的（下）。

我有已经存在的类，如果它们已经存在于下面的 html 中，那么应该使用 Javascript 推荐的代码来删除这些类中的一个或全部。我正在构建的函数将重置元素，我需要当前类存在，但如果存在一个/多个值，则需要删除颜色类。

HTML

<div id="overlay__inner" class="overlay__inner overlayActive clearfix"></div>

类

<ul>
    <li>is--blue</li>
    <li>is--red</li>
    <li>is--yellow</li>
    <li>is--purple</li>
    <li>is--green</li>
    <li>is--pink</li>
    <li>is--orange</li>
</ul>

更新：

所以简而言之，我想在 javascript 中做这个 jQuery 示例：

$('#overlay__inner').removeClass('is--blue is--red is--yellow is--purple is--green is--pink is--orange');

这是我目前所拥有的：

document.getElementById('overlay__inner').classList.remove('is--blue').classList.remove('is--red').classList.remove('is--yellow').classList.remove('is--purple').classList.remove('is--green').classList.remove('is--pink').classList.remove('is--orange');

但我收到此错误：

未捕获的类型错误：无法读取未定义的属性“classList”

【问题讨论】：

不确定类部分是否应该是代码。如果没有，请使用 markdown 创建列表。
@FelixKling 这个问题有所不同，我希望在添加课程后保留课程。这是测试和特定的类删除是我需要帮助的。
另一个问题展示了如何从元素中删除一个类，甚至链接到classList.... 这不是你想要的吗？无需测试类是否存在。
这实际上是更好的副本：Change an element's CSS class with JavaScript --- 我不明白您还需要/想知道什么。
我会更新我的问题。

标签： javascript html

【解决方案1】：

删除单个类相当简单，您具体遇到了什么问题？

var els = document.querySelectorAll('.is--blue');
Array.prototype.forEach.call(els, function(el) {
  el.classList.remove('is--blue');
});

.is--blue {
  color: blue;
}

<p class="is--blue something-else">Sample</p>
<p class="is--blue">Sample</p>

【讨论】：

这里的问题是我在其他地方使用过这个类，而且我已经有了对象存储，所以查询选择器会比获取 ID 慢。是的，如果存在任何颜色（.is--red、.is--yellow 等），我有多个代码需要的类。
@Neil：如何获得对元素的引用与问题无关。您只需遍历所有要删除的类名并删除它们。我还是不明白你有什么问题。