Question

我有以下类（如下所示），它们是动态添加到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示例：

$（＆＃39;＃overlay__inner＆＃39;）。removeClass（＆＃39;是 - 蓝色是 - 红色是 - 黄色是 - 紫色是 - 绿色是 - 粉红色是 - 橙色＆＃39）;

这是我到目前为止所做的：

＆＃13;

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');

＆＃13;

但是我收到了这个错误：

未捕获的TypeError：无法读取属性＆＃39; classList＆＃39;未定义的

Answer 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>

仅限JavaScript - 删除某些类（如果存在）

1 个答案: