Home » Jquery » mdbootstrap – jQuery can't remove class from material bootstrap-Exceptionshub

mdbootstrap – jQuery can't remove class from material bootstrap-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

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>
How to&Answer:

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>