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 1: This example using the approach discussed above.
<!DOCTYPE HTML> < html > < head > < title > How to remove all classes that begin with a certain string JavaScript? </ title > < script src = </ script > < style > #div { height: 100px; } .el-color { color: white; } .el-background { background: green; } .el-border { border: 3px solid blue; } </ style > </ head > < body id = "body" align = "center" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p id = "GFG_UP" style="font-size: 15px; font-weight: bold;"> </ 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" style="font-size: 20px; font-weight: bold; color:green;"> </ 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 > </ body > </ html > |
chevron_right
filter_none
Output:
-
Before clicking on the button:
-
After clicking on the button:
Approach 2
- Select a particular element.
- Use .className property to get access to all the classes.
- Use .split() method to get all classes as a element.
- Use .filter() function to filter out the classes which are not starting with certain character.
- Finally, put those classes with the element.
Example 2: This example using the approach discussed above.
<!DOCTYPE HTML> < html > < head > < title > How to remove all classes that begin with a certain string JavaScript? </ title > < script src = </ script > < style > #div { height: 100px; } .el-color { color: white; } .el-background { background: green; } .el-border { border: 3px solid blue; } </ style > </ head > < body id = "body" align = "center" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p id = "GFG_UP" style="font-size: 15px; font-weight: bold;"> </ 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" style="font-size: 20px; font-weight: bold; color:green;"> </ 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 > </ body > </ html > |
chevron_right
filter_none
Output:
-
Before clicking on the button:
-
After clicking on the button:
Recommended Posts:
- How to remove spaces from a string using JavaScript ?
- How to remove text from a string in JavaScript?
- How to remove a character from string in JavaScript ?
- How to remove all line breaks from a string using JavaScript?
- How to remove portion of a string after certain character in JavaScript ?
- How to Add and Remove multiple classes in jQuery ?
- How to remove CSS property using JavaScript?
- How to remove an HTML element using JavaScript ?
- Remove elements from a JavaScript Array
- How to remove a property from JavaScript object ?
- JavaScript | Remove a JSON attribute
- How to remove all rows from a table in JavaScript ?
- JavaScript | Remove the last item from an array
- How to remove time from date using JavaScript ?
- How to remove an element from an array in JavaScript?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.