香草JS:检查元素classList是否包含数组中的值并删除它们

Vanilla JS: Check if element classList contains values from an array and remove them

本文关键字：删除 数组 包含 JS 检查 元素 是否 classList 香草      更新时间：2023-09-26

我有一个div:

<div class="modal" id="modal">

偶尔，它也可能有一个来自数组的类["success", "error", "warning"]

我如何检查元素是否有该数组中的任何类并删除它们，而不删除modal类?

我要做的是:

var modalAlertClasses = ['warning', 'error','success'];
var modal = document.getElementById('modal');    
for (var i = 0; i < modal.classList.length; i++) {
        if (modalAlertClasses.indexOf(modal.classList[i]) > -1) {
            modal.classList.remove[modal.classList[i]];
            console.log(modal.classList[i]);
            }
        }

您的代码使用以下

modal.classList.remove[modal.classList[i]];

但.classList.remove是函数，所以应该写成

modal.classList.remove(modal.classList[i]);


var modalAlertClasses = ['warning', 'error','success'];
var modal = document.getElementById('modal');    
modalAlertClasses.forEach(function(entry) {
    if( modal.classList.contains(entry)){
         modal.classList.remove(entry);
    }
});
<div class="modal warning error" id="modal">
  modal
</div>

最简洁的方式:

modal.classList.remove(...modalAlertClasses);

如果不支持- plain js:

modalAlertClasses.forEach(function(el) {
  modal.classList.remove(el);
});
相关文章：