Kan iemand me vertellen hoe ik een klasse op een element kan verwijderen met alleen JavaScript?
Geef me alsjeblieft geen antwoord met jQuery, want ik kan het niet gebruiken en ik weet er ook niets van.
Antwoord 1, autoriteit 100%
De juiste en standaardmanier om dit te doen is het gebruik van classList. Het wordt nu breed ondersteund in de nieuwste versie van de meeste moderne browsers:
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>Antwoord 2, autoriteit 52%
document.getElementById("MyID").className =
document.getElementById("MyID").className.replace(/\bMyClass\b/,'');
waar MyIDde ID van het element is en MyClass de naam van de klasse die je wilt verwijderen.
UPDATE:
Om klassenamen met een streepje te ondersteunen, zoals “My-Class”, gebruikt u
document.getElementById("MyID").className =
document.getElementById("MyID").className
.replace(new RegExp('(?:^|\\s)'+ 'My-Class' + '(?:\\s|$)'), ' ');
Antwoord 3, Autoriteit 6%
Hier is een manier om deze functionaliteit recht in alle DOM-elementen te bakken:
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;
}
Antwoord 4, Autoriteit 4%
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,' ');
}
}
Antwoord 5, Autoriteit 4%
div.classList.add("foo");
div.classList.remove("foo");
meer op https://developer.mozilla.org/en-US/docs /Web/api/element.classlist
Antwoord 6, Autoriteit 3%
bewerken
Oké, volledig opnieuw schrijven.
Het is een tijdje geleden dat ik een beetje heb geleerd en de opmerkingen hebben geholpen.
Node.prototype.hasClass = function (className) {
if (this.classList) {
return this.classList.contains(className);
} else {
return (-1 < this.className.indexOf(className));
}
};
Node.prototype.addClass = function (className) {
if (this.classList) {
this.classList.add(className);
} else if (!this.hasClass(className)) {
var classes = this.className.split(" ");
classes.push(className);
this.className = classes.join(" ");
}
return this;
};
Node.prototype.removeClass = function (className) {
if (this.classList) {
this.classList.remove(className);
} else {
var classes = this.className.split(" ");
classes.splice(classes.indexOf(className), 1);
this.className = classes.join(" ");
}
return this;
};
Oud bericht
Ik was net bezig met zoiets. Hier is een oplossing die ik heb bedacht…
// Some browsers don't have a native trim() function
if(!String.prototype.trim) {
Object.defineProperty(String.prototype,'trim', {
value: function() {
return this.replace(/^\s+|\s+$/g,'');
},
writable:false,
enumerable:false,
configurable:false
});
}
// addClass()
// first checks if the class name already exists, if not, it adds the class.
Object.defineProperty(Node.prototype,'addClass', {
value: function(c) {
if(this.className.indexOf(c)<0) {
this.className=this.className+=' '+c;
}
return this;
},
writable:false,
enumerable:false,
configurable:false
});
// removeClass()
// removes the class and cleans up the className value by changing double
// spacing to single spacing and trimming any leading or trailing spaces
Object.defineProperty(Node.prototype,'removeClass', {
value: function(c) {
this.className=this.className.replace(c,'').replace(' ',' ').trim();
return this;
},
writable:false,
enumerable:false,
configurable:false
});
Nu kunt u myElement.removeClass('myClass')
aanroepen
of koppel het: myElement.removeClass("oldClass").addClass("newClass");
Antwoord 7, autoriteit 2%
Het is heel eenvoudig, denk ik.
document.getElementById("whatever").classList.remove("className");
Antwoord 8
probeer:
function removeClassName(elem, name){
var remClass = elem.className;
var re = new RegExp('(^| )' + name + '( |$)');
remClass = remClass.replace(re, '$1');
remClass = remClass.replace(/ $/, '');
elem.className = remClass;
}
Antwoord 9
var element = document.getElementById('example_id');
var remove_class = 'example_class';
element.className = element.className.replace(' ' + remove_class, '').replace(remove_class, '');
Antwoord 10
Ik gebruik deze JS-fragmentcode:
Allereerst bereik ik alle klassen en vervolgens stel ik volgens de index van mijn doelklasse className = “”in.
Target = document.getElementsByClassName("yourClass")[1];
Target.className="";
Antwoord 11
document.getElementById("whatever").className += "classToKeep";
Met het plusteken (‘+’) dat de klasse toevoegt in plaats van bestaande klassen te overschrijven