For example - I have just the next line of code, where I need to recorgonize if the span
have the some class
included that begins from the oute--active
. And if so - delete it via JS
.
<span class="oute___259Az oute--active___1Ffc-"></span>
Any ideas how we can make it?
I had tried next, but it does not work:
document.querySelector('[class^="oute"]').classList.remove(/oute--active/g)
For example - I have just the next line of code, where I need to recorgonize if the span
have the some class
included that begins from the oute--active
. And if so - delete it via JS
.
<span class="oute___259Az oute--active___1Ffc-"></span>
Any ideas how we can make it?
I had tried next, but it does not work:
document.querySelector('[class^="oute"]').classList.remove(/oute--active/g)
Share
Improve this question
asked May 17, 2018 at 10:44
Max WolfenMax Wolfen
2,0436 gold badges27 silver badges42 bronze badges
7
- possible (jquery) duplicate : stackoverflow./questions/2644299/jquery-removeclass-wildcard – Temani Afif Commented May 17, 2018 at 10:48
- @TemaniAfif I do need jQuery solution! Just pure JS – Max Wolfen Commented May 17, 2018 at 10:48
- @TemaniAfif he is using vanilla javascript. not jquery – patelarpan Commented May 17, 2018 at 10:50
- 2 that's why I only said possible jquery duplicate ... I didn't close the quesiton, the jQuery method may interest other people and it may give idea for any JS implementation – Temani Afif Commented May 17, 2018 at 10:50
- @patelarpan I know, and i didn't close :) I was clear, that this a duplicate with a jQuery method ... for future reference – Temani Afif Commented May 17, 2018 at 10:51
4 Answers
Reset to default 4Unfortunately according to the MDN docs the <element>.classList.remove()
method requires a <string>
argument and it doesn't accept a <RegExp>
.
So you could simply replace the whole className of the element by removing the class starting with oute--active<something>
let oute = document.querySelector('[class^="oute"]')
oute.className = oute.className.replace(/\boute--active.+?/g, '');
Codepen demo
Using the following function, you can delete the desired class by knowing a part of that class name, from the class list:
function removeClassByString( part ) {
var elements = document.getElementsByTagName( 'span' );
for ( var i = 0; i < elements.length; i++ ) {
var classList = elements[i].className.split( ' ' );
var count = classList.length;
for ( var j = 0; j < count; j++ ) {
if ( classList[j].search( part ) != -1 ) {
delete classList.splice( j, 1 )
}
}
if ( count != classList.length ) {
var el = document.createElement( 'i' );
el.innerText = ' (class removed!)'
} else {
var el = document.createElement( 'i' );
el.innerText = ' (no change)'
}
elements[i].appendChild( el );
elements[i].className = classList.join( ' ' )
}
}
span {
display: block;
font: normal 1em "Lucida Console", Monaco, monospace
}
i {
color: green
}
.oute--active___1Ffc- {
color: red
}
<span class="oute--active___1Ffc-">The phrase exists in the class name.</span>
<span class="oute___259Az">The phrase does'nt exist in the class name.</span>
<span class="oute___259Az oute">The phrase does'nt exist in the class name.</span>
<span class="oute___259Az oute--active___1Ffc-">The phrase exists in the class name.</span>
<br />
<input name="" type="button" value="Remove Class" onclick="removeClassByString( 'oute--active' )" />
<span class="oute___259Az oute--active___1Ffc-"></span>
<script>
// List with span's classes
var classList = document.querySelector('[class^="oute"]').classList;
// List with classes to remove
var removeClassList = [];
// Get classes that matches with regexp
classList.forEach( function(value) {
var result = /([^ ]*)(oute--active)([^ ]*)/g.test(value);
if(result){
removeClassList.push(value);
}
});
// Remove classes that matches with regexp from span
removeClassList.forEach( function(value) {
document.querySelector('[class^="oute"]').classList.remove(value);
});
</script>
You can do this way.
- split your classes into an array
- using javascript
some
method test if a particular class is available or not. - if available then delete the element.
if(document.querySelector('[class^="oute"]').className.split(' ').some(c => /oute--/g.test(c) )) {
document.querySelector('[class^="oute"]').remove();
}
<span class="oute___259Az oute--active___1Ffc-">test</span>