JSFiddle - React, Tailwind, and code Playground

by Gerald Fullam

HTML

<span class="hello foo">hello</span><span class="world bar">world</span>
<button id="foobtn" type="button">Remove unwanted classes</button>

CSS

.hello, .world {
    display: inline-block;
    color: cornflowerblue;
    background-color: oldlace;
    border-radius: 0.25em;
    margin: 0.5em;
    padding: 0.5em;
    font: bold 1em sans-serif;
    border: 2px solid antiquewhite;
    transition: all 1s;
}
.foo, .bar {
    color: firebrick;
    background-color: dodgerblue;
    border-radius: 0;
    margin: 0;
    padding: 0;
    font: normal 1em monospace;
    border-width: 1em;
    border-color: PaleVioletRed LimeGreen OliveDrab BurlyWood;
}
button {
    display: block;
    margin-top: 10px;
}

JavaScript

// Remove all classes except those specified
$('#foobtn').click(function () {
    $('span').removeClass(function () { 
        return $(this).attr('class').replace(/\b(?:hello|world)\b\s*/g, ''); 
    });
});