How to remove className if we know only the part of className?

Question

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 outcome--active. And if so - delete it via JS.

<span class="outcome___259Az outcome--active___1Ffc-"></span>

Any ideas how we can make it?

I had tried next, but it does not work:

document.querySelector('[class^="outcome"]').classList.remove(/outcome--active/g)

possible (jquery) duplicate : https://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard — Temani Afif, May 17 '18 at 10:48
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, May 17 '18 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, May 17 '18 at 10:51
Reeks of design flaw, maybe? Why is that random/changing part in the classname? — GolezTrol, May 17 '18 at 11:05
Given that both of those class-names start with the string `outcome` how do you determine which, if any, of those class-names should be removed from the element? — David Thomas, May 17 '18 at 11:07

Fabrizio Calderan · Accepted Answer · 2018-05-17T11:02:55.053

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 outcome--active<something>

let outcome = document.querySelector('[class^="outcome"]')
outcome.className = outcome.className.replace(/\boutcome--active.+?/g, '');

Codepen demo

edited May 17 '18 at 11:02

answered May 17 '18 at 10:55

Fabrizio Calderan

120,726
26
164
177

This would target only the elements whose class attribute starts exactly with`"outcome"`, if there is an other class set before, or even just a space, then it won't match. Also, in your codepen, the rule `[class="outcome--active___1Ffc-"]` never matches, and `:not([class="outcome--active___1Ffc-"])` always matches, js or not. – Kaiido May 17 '18 at 11:23
in fact. the codepen shows that the class has been properly removed while the other classes have been kept – Fabrizio Calderan May 17 '18 at 11:24
No, it doesn't show anything that's my point. Your element's class attribute is never set to the string `"outcome--active___1Ffc-"`. You could have written `:not(*){color:red}*{color:green}` and it would do exactly the same. – Kaiido May 17 '18 at 11:24
...try to remove your js. Is anything red? – Kaiido May 17 '18 at 11:27
ok, i see, Just forgot `~` in my css but the code works as expected. (Remove the js, now the span is in red) – Fabrizio Calderan May 17 '18 at 11:29
Better, but your js selector should be improved too in order to catch the elements which have an other class set before, or [even just a space](https://codepen.io/anon/pen/WJYbBE). (`'[class^="outcome"],[class*=" outcome"]'` should do it) – Kaiido May 17 '18 at 11:32

score 1 · Answer 2 · answered May 17 '18 at 15:20

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
}
.outcome--active___1Ffc- {
    color: red
}

<span class="outcome--active___1Ffc-">The phrase exists in the class name.</span>
<span class="outcome___259Az">The phrase does'nt exist in the class name.</span>
<span class="outcome___259Az outcome">The phrase does'nt exist in the class name.</span>
<span class="outcome___259Az outcome--active___1Ffc-">The phrase exists in the class name.</span>
<br />
<input name="" type="button" value="Remove Class" onclick="removeClassByString( 'outcome--active' )" />

patelarpan · Answer 3 · 2018-05-17T11:16:00.940

0

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^="outcome"]').className.split(' ').some(c => /outcome--/g.test(c) )) {
    document.querySelector('[class^="outcome"]').remove();
}

<span class="outcome___259Az outcome--active___1Ffc-">test</span>

edited May 17 '18 at 11:16

answered May 17 '18 at 11:10

patelarpan

7,188
2
20
25

score 0 · Answer 4 · answered May 17 '18 at 11:13

<span class="outcome___259Az outcome--active___1Ffc-"></span>

<script>

// List with span's classes
var classList = document.querySelector('[class^="outcome"]').classList;

//  List with classes to remove
var removeClassList = [];

//  Get classes that matches with regexp
classList.forEach( function(value) {
    var result = /([^ ]*)(outcome--active)([^ ]*)/g.test(value);
  if(result){
    removeClassList.push(value);
  }
});

//  Remove classes that matches with regexp from span
removeClassList.forEach( function(value) {
    document.querySelector('[class^="outcome"]').classList.remove(value);
});
</script>

How to remove className if we know only the part of className?

4 Answers4