CSS-Klasse mit JavaScript aus einem Element entfernen (ohne jQuery)

Question

Kann mir jemand sagen, wie ich eine Klasse auf einem Element nur mit JavaScript entfernen kann? Bitte geben Sie mir keine Antwort mit jQuery, da ich es nicht verwenden kann und keine Ahnung davon habe.

Answer 1

Die richtige und übliche Vorgehensweise ist die Verwendung von classList . Es ist jetzt breite Unterstützung in den neuesten Versionen der meisten modernen Browser :

ELEMENT.classList.remove("CLASS_NAME");

remove.onclick = () => {
  const el = document.querySelector('#el');
  if (el.classList.contains("red")) {
    el.classList.remove("red");

  }
}

.red {
  background: red
}

<div id='el' class="red"> Test</div>
<button id='remove'>Remove Class</button>

Dokumentation: https://developer.mozilla.org/en/DOM/element.classList

Answer 2

document.getElementById("MyID").className =
    document.getElementById("MyID").className.replace(/\bMyClass\b/,'');

wobei MyID ist die ID des Elements und MyClass ist der Name der Klasse, die Sie entfernen möchten.

---

UPDATE : Um Klassennamen zu unterstützen, die einen Bindestrich enthalten, wie z. B. "My-Class", verwenden Sie

document.getElementById("MyID").className =
  document.getElementById("MyID").className
    .replace(new RegExp('(?:^|\\s)'+ 'My-Class' + '(?:\\s|$)'), ' ');

Answer 3

Hier ist eine Möglichkeit, diese Funktionalität direkt in alle DOM-Elemente einzubauen:

HTMLElement.prototype.removeClass = function(remove) {
    var newClassName = "";
    var i;
    var classes = this.className.split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] !== remove) {
            newClassName += classes[i] + " ";
        }
    }
    this.className = newClassName;
}

Answer 4

div.classList.add("foo");
div.classList.remove("foo");

Mehr unter https://developer.mozilla.org/en-US/docs/Web/API/element.classList

Answer 5

Versuchen Sie dies:

function hasClass(ele, cls) {
  return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function removeClass(ele, cls) {
  if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
  }
}