Optimize the way to remove classes of elements

Question

I have a sequence of lines to remove classes of various elements. There would be a more sophisticated way, perhaps with less code to perform 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');

Answer 1

You can write a function that optimizes this by making 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 design structure so that it is not uncoupled or dropped. Inside a Helpers or something.

Answer 2

Do as the @Vandemberg Lima response suggested, but since the classes have the same prefix control-, to be 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>
<div class="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>

Answer 3

Another way is also using .call(), where you send the names of the classes 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>
<div class="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>