Optimize how to remove element classes

Question

Optimize how to remove element classes

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

0

I have a sequence of rows to remove classes from multiple elements. Would there be a more sophisticated way, perhaps with less code to accomplish the same as the code below?

$(document).find('.control-corpo').removeClass('control-corpo'); $(document).find('.control-container').removeClass('control-container'); $(document).find('.control-button').removeClass('control-button'); $(document).find('.control-content').removeClass('control-content'); $(document).find('.control-scroll').removeClass('control-scroll'); $(document).find('.control-delay').removeClass('control-delay');

javascript jquery

asked by anonymous 26.05.2018 / 21:53

3 answers

1

Do as the answer from @Vemberemberg Lima suggested, but since the classes have the same prefix control- , to get even more optimized, you can send to the function only the name that comes after the prefix, and still use the short form of .find() :

function rClass(c){
   $('.control-'+c, document).removeClass('control-'+c);
}

function exemplo(){
   rClass('corpo');
   rClass('container');
   rClass('button');
   rClass('content');
   rClass('scroll');
   rClass('delay');
}

[class^='control']{
   background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="control-corpo">corpo</div>
<div class="control-container">container</div>
<div class="control-button">button</div>
<div class="control-content">content</div>
<div class="control-scroll">scroll</div>
<div class="control-delay">delay</div>
<br>
<button onclick="exemplo()">Remover classes</button>

27.05.2018 / 00:00

1

Another way is also using .call() , where you send the class names via array to the function. This way you only call the function once and remove all the specified classes:

function rClass(a){
   for(var c of a)
   $('.control-'+c, document).removeClass('control-'+c);
}

function exemplo(){
   rClass.call(null,
      ['corpo','container','button','content','scroll','delay']
   );
}

[class^='control']{
   background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="control-corpo">corpo</div>
<div class="control-container">container</div>
<div class="control-button">button</div>
<div class="control-content">content</div>
<div class="control-scroll">scroll</div>
<div class="control-delay">delay</div>
<br>
<button onclick="exemplo()">Remover classes</button>

27.05.2018 / 00:20

how to calculate the number of days with input of type date? [duplicate] at and followed quotation marks in a string (exiting & quot; or # 39; in View)

score 2 · Accepted Answer

You can write a function that optimizes this, leaving the code cleaner.

function removeClass(className) {
    $(document).find("." + className).removeClass(className);
}

removeClass('control-corpo');
removeClass('control-container');
removeClass('control-button');
removeClass('control-content');
removeClass('control-scroll');
removeClass('control-delay');

It is also important to add this function to the project structure so that it is not disengaged or dropped. Inside a Helpers or something like that.