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

Namachila 2 weeks ago

0 0 2 minutes read

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;"> 
    zambiatek 
</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?

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;"> 
    zambiatek 
</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?

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

Namachila 2 weeks ago

0 0 2 minutes read

Namachila

Leave a Reply Cancel reply