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= </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?
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= </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?
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!
