title: How to remove class from all elements jquery
body: <p>I am changing the class of an element with the following</p>
  
  <pre><code>  $("#"+data.id).addClass("highlight")
  </code></pre>
  
  <p>Given the list below. </p>
  
  <pre><code> &lt;div id="menuItems"&gt; 
   &lt;ul id="contentLeft" class="edgetoedge"&gt; 
   &lt;li  class="sep" "&gt;Shakes and Floats&lt;/li&gt; 
   &lt;li id="297"&gt;&lt;a href="#" onClick="cart('297','add')"&gt;&lt;small&gt;$5.00&lt;/small&gt;&lt;b&gt;Vanilla&lt;/b&gt;     &lt;/a&gt;&lt;/li&gt; 
   &lt;li id="298"&gt;&lt;a href="#" onClick="cart('298','add')"&gt;&lt;small&gt;$5.00&lt;/small&gt;&lt;b&gt;Peanut Butter&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; 
   &lt;li id="299"&gt;&lt;a href="#" onClick="cart('299','add')"&gt;&lt;small&gt;$5.00&lt;/small&gt;&lt;b&gt;Combo&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; 
   &lt;li id="300"&gt;&lt;a href="#" onClick="cart('300','add')"&gt;&lt;small&gt;$5.00&lt;/small&gt;&lt;b&gt;Chocolate&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; 
   &lt;li id="301"&gt;&lt;a href="#" onClick="cart('301','add')"&gt;&lt;small&gt;$5.00&lt;/small&gt;&lt;b&gt;Strawberry&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; 
   &lt;li id="303"&gt;&lt;a href="#" onClick="cart('303','add')"&gt;&lt;small&gt;$5.00&lt;/small&gt;&lt;b&gt;Banana&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; 
   &lt;li id="304"&gt;&lt;a href="#" onClick="cart('304','add')"&gt;&lt;small&gt;$5.00&lt;/small&gt;&lt;b&gt;Root Beer Float&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; 
   &lt;li id="305"&gt;&lt;a href="#" onClick="cart('305','add')"&gt;&lt;small&gt;$5.00&lt;/small&gt;&lt;b&gt;Espresso&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; 
   &lt;/ul&gt;
   &lt;/div&gt; 
  </code></pre>
  
  <p>I assumed I could remove the class with this...</p>
  
  <pre><code>  $(".edgetoedge").removeClass("highlight");
  </code></pre>
  
  <p>But this doesn't work. How can I remove the class?</p>