title: Remove/Add multiple Classes stuffed in a variable jquery
body: <p>Could someone please help me this problem I am having, 
  I want to be able to change the background of the body on click on a bunch of list items.
  The body itself always has two classes that can't be removed.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body class="bodyclass1 bodyclass2"&gt;
  
      &lt;ul&gt;
          &lt;li class="red"&gt;&lt;div class="colorme"&gt;red&lt;/div&gt;&lt;/li&gt;
          &lt;li class="blue"&gt;&lt;div class="colorme"&gt;blue&lt;/div&gt;&lt;/li&gt;
          &lt;li class="green"&gt;&lt;div class="colorme"&gt;green&lt;/div&gt;&lt;/li&gt;
          &lt;li class="brown"&gt;&lt;div class="colorme"&gt;brown&lt;/div&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>body.red{
      background: red
  }
  
  body.blue{
      background: blue
  }
  
  body.green{
      background: green
  }
  
  body.brown{
      background: brown
  }
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>&lt;script language="javascript"&gt;
  
  $.noConflict();
      jQuery( document ).ready(function( $ ) {
  
  
          $( ".colorme" ).on('click',function(){
  
  
              var allKleur = $('.red, .blue, .green, .brown');
              var colorDad = $(this).parents('li:eq(0)').attr('class');
  
              $('body').removeClass(allKleur).addClass(colorDad);
          });
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>What happens with this code is ti does add the class from the variable of the parent clicked on, but it doesn't remove the classes, leaving it just with the one that was clicked on.</p>
  
  <p>It did work this way:</p>
  
  <pre><code>$('body').removeClass().addClass(colorDad);
  </code></pre>
  
  <p>but then it removed all the classes the body tag already has, and which shouldn't be removed.</p>
  
  <p>Any help in the right direction would be much appreciated, thanks.</p>