How to remove class from all elements jquery

Jquery

Jquery Problem Overview


I am changing the class of an element with the following

  $("#"+data.id).addClass("highlight")

Given the list below.

 <div id="menuItems"> 
 <ul id="contentLeft" class="edgetoedge"> 
 <li  class="sep" ">Shakes and Floats</li> 
 <li id="297"><a href="#" onClick="cart('297','add')"><small>$5.00</small><b>Vanilla</b>     </a></li> 
 <li id="298"><a href="#" onClick="cart('298','add')"><small>$5.00</small><b>Peanut Butter</b></a></li> 
 <li id="299"><a href="#" onClick="cart('299','add')"><small>$5.00</small><b>Combo</b></a></li> 
 <li id="300"><a href="#" onClick="cart('300','add')"><small>$5.00</small><b>Chocolate</b></a></li> 
 <li id="301"><a href="#" onClick="cart('301','add')"><small>$5.00</small><b>Strawberry</b></a></li> 
 <li id="303"><a href="#" onClick="cart('303','add')"><small>$5.00</small><b>Banana</b></a></li> 
 <li id="304"><a href="#" onClick="cart('304','add')"><small>$5.00</small><b>Root Beer Float</b></a></li> 
 <li id="305"><a href="#" onClick="cart('305','add')"><small>$5.00</small><b>Espresso</b></a></li> 
 </ul>
 </div> 

I assumed I could remove the class with this...

  $(".edgetoedge").removeClass("highlight");

But this doesn't work. How can I remove the class?

Jquery Solutions


Solution 1 - Jquery

You need to select the li tags contained within the .edgetoedge class. .edgetoedge only matches the one ul tag:

$(".edgetoedge li").removeClass("highlight");

Solution 2 - Jquery

try: $(".highlight").removeClass("highlight");. By selecting $(".edgetoedge") you are only running functions at that level.

Solution 3 - Jquery

This just removes the highlight class from everything that has the edgetoedge class:

$(".edgetoedge").removeClass("highlight");

I think you want this:

$(".edgetoedge .highlight").removeClass("highlight");

The .edgetoedge .highlight selector will choose everything that is a child of something with the edgetoedge class and has the highlight class.

Solution 4 - Jquery

You could try this:

 $(".edgetoedge").children().removeClass("highlight");

Solution 5 - Jquery

$(".edgetoedge>li").removeClass("highlight");

Solution 6 - Jquery

The best to remove a class in jquery from all the elements is to target via element tag. e.g.,

$("div").removeClass("highlight");

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmaxumView Question on Stackoverflow
Solution 1 - JquerymellamokbView Answer on Stackoverflow
Solution 2 - JqueryscrappedcolaView Answer on Stackoverflow
Solution 3 - Jquerymu is too shortView Answer on Stackoverflow
Solution 4 - JqueryOliver SprynView Answer on Stackoverflow
Solution 5 - JquerycmpliegerView Answer on Stackoverflow
Solution 6 - JqueryNAVNEET CHANDANView Answer on Stackoverflow