jquery removeClass this type of class [class^=notice-]

Question

This html is generated, and prepended to a form, with jquery when an ajax request is done:

<div class="notice-success clickable close" id="notice"><p class="icon">response message</p></div>

the class notice-success can also be:
notice-error,
notice-warning,
notice-info
depending on the situation or response.

Here's a simplified portion of my javascript:

let $form = $('form#'+$(this).attr('id'));  //  use this specific form
let $formNotice = $form.find('#notice');  //  locate #notice element (if any)

if($formNotice.length){  //  if there's a #notice, then update it to reflect the new response.
    $formNotice.removeClass('[class^=notice-]');  //  <-- this doesn't work
    $formNotice.addClass('notice-'+data['type'])
    $formNotice.html('<p class="icon">'+data['msg']+'</p>');
} else {
    $('<div class="notice-'+data['type']+' clickable close" id="notice"><p class="icon">'+data['msg']+'</p></div>').hide().prependTo($form).slideDown("slow");
}

.removeClass('[class^=notice-]') does not work.
removing one of the other classes (clickable or close) works just fine.
$formNotice.addClass and $formNotice.html is also ok.

So my question would then be how to change/remove any of the notice--classes?

I also tried $formNotice.removeClass('class'); to just remove all classes, and then put them all back with .addClass(). But that didn't work either.. I just got a whole lot of classes added when resubmitting the form over and over...

Any suggestion?

EDIT (solved):
By using this code allowed me to find and remove a class that starts width notice- (in my case).
- https://stackoverflow.com/a/28608620/1355562
Thanks for pointing me in the right direcion...

Then, when adding a new notice-?-class with .addClass, it got added at the end - Which somehow broke the code. All css-properties besides background-color didn't get rendered correctly.
After some testing it turned out this class had to be the first.
By knowing this, i had to find a way to add this class at the beginning of the class list. So I found this:
- https://stackoverflow.com/a/23839395/1355562

Might help: https://stackoverflow.com/questions/28608587/how-to-remove-a-class-that-starts-with — sol, Sep 25 '18 at 07:25
Add double quotes around notice- (here: removeClass('[class^=notice-]');) — Gerard, Sep 25 '18 at 07:27
Try the `*=` selector instead of `^=`. Let me know if it works. — Martin, Sep 25 '18 at 07:32

score 1 · Answer 1 · answered Sep 25 '18 at 07:30

1

Can you try

$formNotice.removeClass('notice-error notice-warning notice-info');

answered Sep 25 '18 at 07:30

raikumardipak

1,461
2
29
49

It's not what he asked for – Sep 25 '18 at 07:31
1

It could work, but if one decides to expand, or change, the list of possible `notice-types`, then one would also need to update this code. I don't think that would be a good enought solution.. but thanks for your suggestion anyway :) – ThomasK Sep 25 '18 at 08:18

jquery removeClass this type of class [class^=notice-]

1 Answers1