JSFiddle - React, Tailwind, and code Playground

by gskinner

HTML

<div id="foo" class="test-zero hello goodbye test-one foo test-two what hello-there test-three yoHELLO cool-1 cool-22 goodbye"></div>

CSS

body { font-family: monospace; }
p { border: dotted 1px black; padding: 0.5em; }

JavaScript

removeClass = function (element, className) {
	if (className instanceof RegExp) {
		var arr = element.className.split(" "), re=className;
		element.className = arr.filter(function(s) { return !re.test(s); }).join(" ");
	} else {
		var list = element.classList;
		list.remove.apply(list, className.split(" "));
	}
	return element;
};

// initial list:
out(foo.classList);

// simple remove:
removeClass(foo, "goodbye");
out(foo.classList);

// remove classes starting with "test-":
removeClass(foo, /^test-/);
out(foo.classList);

// remove classes that match "cool-X" where X is a single digit:
removeClass(foo, /^cool-\d$/);
out(foo.classList);

// remove classes that contain "hello", case insensitive:
removeClass(foo, /hello/i);
out(foo.classList);


function out(str) {
	document.body.innerHTML += "<p>"+str+"</p>";
}