jQuery can't remove class from material bootstrap

Question

I'm using material bootstrap. And trying to remove waves-effect waves-light classes. But it does not work:

$("nav a").removeClass("waves-effect waves-light");

While if I do add class;

$("nav a").addClass("testing"); // it works!

It works if use setTimeout:

setTimeout(function(){
  $("nav a").removeClass("waves-effect waves-light");
},100)

But I'm not sure why is this required? I have added script after mdb script.

<script type='text/javascript' src='http://localhost/site/js/jquery.min.js'></script>
<script type='text/javascript' src='http://localhost/site/js/popper.min.js'></script>
<script type='text/javascript' src='http://localhost/site/js/bootstrap.min.js'></script>
<script type='text/javascript' src='http://localhost/site/js/mdb.min.js'></script>
<script type='text/javascript' src='http://localhost/site/js/custom-script.js'></script>

It's very simple. `a` tag is inside `nav` tag and those classes are added by mdb. — gacat, Feb 16 '20 at 11:50
This should work fine, there is no problem with this code - But I guess you are trying to remove class before `mdb` add! — Pedram, Feb 16 '20 at 11:52
Given that the setTimeout version works, would have to guess that it's a matter of which event thread the jQuery expression runs in. As it stands (without the timeout), the element(s) and/or those class names probably don't exist at the time the expression is executed. — Roamer-1888, Feb 16 '20 at 12:19

score 0 · Answer 1 · answered Feb 16 '20 at 12:02

addClass work because you trying to add a new class to element, but removeClass not, because waves-effect waves-light class add after you. As you edited your question, you used setTimeOut but it's not a stable solution, you are using a library mdb, it can load after 100ms, or even after 1000, you should use setInterval and clear when it removed like below example, this is a safe solution, but I rather to remove this class from source code.

var rm = setInterval(remover, 100);

function remover() {
  $("nav a").removeClass("waves-effect waves-light");
}

function StopInterval() {
  if (!$("nav a").hasClass('.waves-effect.waves-light')) {
    clearInterval(rm);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <a class="waves-effect waves-light">Blah</a>
</nav>

jQuery can't remove class from material bootstrap

1 Answers1