从所有元素中删除一个类 JavaScript

在前端开发中，我们经常需要通过操作DOM元素的class列表来实现元素的样式控制。有时候我们需要从所有元素中删除一个类，本文就会向大家介绍如何使用JavaScript实现此功能。

方法一：使用classList.remove()

使用classList提供的remove()方法可以方便地从元素的class列表中删除一个类。该方法接收一个字符串参数，即要删除的类名。

const elements = document.querySelectorAll('.class-to-remove');

elements.forEach(function(el){
  el.classList.remove('class-to-remove');
});

这里我们首先使用querySelectorAll()方法获取所有具有class名为"class-to-remove"的元素，然后使用forEach()方法遍历每一个元素。在forEach()方法中，使用classList提供的remove()方法删除元素的class名为"class-to-remove"。

方法二：使用className属性

除了上面介绍的方法外，还可以使用元素的className属性实现从元素中删除一个类。在这种情况下，我们需要操作元素的classList数组。

const elements = document.querySelectorAll('.class-to-remove');

elements.forEach(function(el){
  el.className = el.className.replace(/\bclass-to-remove\b/,'');
});

在这个代码片段中，我们首先使用querySelectorAll()方法获取所有具有class名为"class-to-remove"的元素，然后使用forEach()方法遍历每一个元素。在forEach()方法中，使用元素的className属性和replace()方法，将元素的class名为"class-to-remove"的部分从class列表中删除。

需要注意的是，我们使用正则表达式\bclass-to-remove\b匹配类名，确保只删除与这完全匹配的类名，防止删除包含这个类名的类。

以上就是使用JavaScript从所有元素中删除一个类的两种常用方法。无论您选择哪种方法，都可以方便快捷地实现对元素的样式控制。