使用 classList 删除多个类

在 JavaScript 中，我们可以使用 classList 属性来操作一个元素的类列表。使用 classList 属性，我们可以方便地添加、移除和切换类。

其中，移除单个类很简单，只需要调用 classList.remove() 方法即可。例如：

var element = document.querySelector('div');
element.classList.remove('foo');

但是，当需要移除多个类时，一个一个调用 classList.remove() 显得非常麻烦。这时，我们可以使用 ES6 中的扩展运算符 ... 来删除多个类。

var element = document.querySelector('div');
element.classList.remove(...['foo', 'bar', 'baz']);

以上代码通过解构数组，将多个类作为参数传递给 classList.remove() 方法，从而实现一次删除多个类的目的。

除了使用扩展运算符，我们还可以将多个类放入一个数组中，再通过 forEach() 方法遍历数组，依次调用 classList.remove() 方法。

var element = document.querySelector('div');
['foo', 'bar', 'baz'].forEach(function(className) {
  element.classList.remove(className);
});

使用上述方法，我们可以方便地删除多个类。需要注意的是，当删除不存在的类时，classList.remove() 方法会默默地忽略这个类，不会报错。