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)

• javascript
• html
• css

• 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 4

Unfortunately 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.

1. split your classes into an array
2. using javascript some method test if a particular class is available or not.
3. 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>