刪除一個類

現代瀏覽器提供了一個 classList 物件，以便於操作元素的 class 屬性。較舊的瀏覽器需要直接操作元素的 className 屬性。

*注意類名不以任何特定順序儲存在元素的屬性中

W3C DOM < 4

從元素中刪除一個類需要對 className 屬性進行一些操作。

var toRemove = "bar",
  el = document.getElementById("link1");
el.className = el.className.replace(new RegExp("\\b" + toRemove + "\\b", "g"), "").trim();

刪除多個類名需要迴圈。其餘示例將使用函式來隔離工作

function removeClass(el, name) {
  name = name.split(/\s+/);
  var index = name.length,
    classes = el.className;
  while (index--) {
    classes = classes.replace(new RegExp("\\b" + name[index] + "\\b", "g"), "").trim();
  }
  el.className = classes;
}
var el = document.getElementById("link1");
removeClass(el, "bar baz");

要刪除多個類名的多個元素需要兩個迴圈

function removeClass(els, name) {
  name = name.split(/\s+/);
  var regex, len,
    index = name.length;
  while (index--) {
    regex = new RegExp("\\b" + name[index] + "\\b", "g");
    len = els.length;
    while (len--) {
      els[len].className = els[len].className.replace(regex, "").trim();
    }
  }
}
var els = document.getElementsByTagName("a");
removeClass(els, "bar baz");

W3C DOM >= 4

單個類名可以作為字串刪除。要刪除多個類名，請使用 ES6 的擴充套件運算子：

document.querySelector("#link1").classList.remove("foo");
document.querySelector("#link2").classList.remove(...['foo', 'bar']);

對於多個元素，你需要刪除迴圈內的類名

document.querySelectorAll(".foo").forEach(el => {
  el.classList.remove(...['bar', 'baz']);
});