title: How do I remove an existing class name and add a new one with jQuery and cookies?
body: <p>How can you remove a class name and replace it with a new one?</p>
  
  <pre><code>&lt;style&gt;
      .red {background-color: #FF0000;}
      .green{background-color: #00FF00;}
      .blue {background-color: #0000FF;}
  &lt;/style&gt;
  
  &lt;body class="red"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;red&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;green&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;blue&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>In this case when you click on red or green or blue, the body class name will change accordingly. Also it will make a cookie which will save the choice.</p>
  
  <p>I tried the jQuery .addClass and it's working, but it's adding a class on top of the existing one. Also I can't manage to save the cookie.</p>