How to remove all classes that begin with a certain string in JavaScript?

The task is to remove all the classes of a certain element starting with a specific prefix. Here are a few of the most used techniques discussed. We are going to use JavaScript. 

Approach 1:

• Select a particular element.
• Use .className property to get access to all the classes.
• Use .replace() method to replace all the specific classes by space(Which means classes are removed from the element).
• In this example, a RegExp is used for replacing.

Example: This example using the approach discussed above. 

html

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
    #div {
        height: 100px;
    }

    .el-color {
        color: white;
    }

    .el-background {
        background: green;
    }

    .el-border {
        border: 3px solid blue;
    }
</style>

<h1 style="color:green;">
    GeeksforGeeks
</h1>
<p id="GFG_UP"></p>
<div id="div" class="el-color el-background el-border">
    Div Element
</div>
<br>
<button onclick="GFG_Fun()">
    click here
</button>
<p id="GFG_DOWN"></p>
<script>
    var el_up = document.getElementById('GFG_UP');
    var el_down = document.getElementById('GFG_DOWN');
    el_up.innerHTML =
    "Click on the button to remove all "+
    "classes starting with certain character.";

    function GFG_Fun() {
        $('#div')[0].className =
        $('#div')[0].className.replace(/\bel.*?\b/g, '');
        el_down.innerHTML =
        "Every class starting with 'el' is removed from the element.";
    }
</script>

Output:

How to remove all classes that begin with a certain string in JavaScript?

Approach 2

• Select a particular element.
• Use .className property to get access to all the classes.
• Use .split() method to get all classes as an element.
• Use .filter() function to filter out the classes which do not start with a certain characters.
• Finally, put those classes with the element.

Example 2: This example uses the approach discussed above. 

html

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
    #div {
        height: 100px;
    }

    .el-color {
        color: white;
    }

    .el-background {
        background: green;
    }

    .el-border {
        border: 3px solid blue;
    }
</style>

<h1 style="color:green;">
    GeeksforGeeks
</h1>
<p id="GFG_UP"></p>
<div id="div" class="el-color el-background el-border">
    Div Element
</div>
<br>
<button onclick="GFG_Fun()">
    click here
</button>
<p id="GFG_DOWN"></p>
<script>
    var el_up = document.getElementById('GFG_UP');
    var el_down = document.getElementById('GFG_DOWN');
    var el = document.getElementById('div');
    el_up.innerHTML = "Click on the button to remove "+
    "all classes starting with certain character.";

    function GFG_Fun() {
        var startsWith = "el";
        var classes = el.className.split(" ").filter(function(v) {
            return v.lastIndexOf(startsWith, 0) !== 0;
        });
        el.className = classes.join(" ").trim();
        el_down.innerHTML =
        "Every class starting with 'el' is removed from the element.";
    }
</script>

Output:

How to remove all classes that begin with a certain string in JavaScript?