Delete a parent class from a child element before calling the method on parent (javascript / jquery)

advertisements

Say I have the following unordered list

<ul class="foo">
  <li>
    <div class="bar">
    </div>
    <div class="baz">
    </div>
 </li>
 <li>
   <div class="bar">
   </div>
   <div class="baz">
   </div>
 </li>
</ul>
<div class="nav">
    <a class="prev-link">Previous</a>
    <a class="next-link">Next</a>
</div>

I pass the list to a carousel like so $(".foo").carouFredSel(//options) however i don't want the class bar to be affected by the carousel.

I've tried $('.bar').removeClass('foo') before calling the carousel, but it doesn't seem to work... it is still part of the carousel. How can i prevent that one div from inheriting the parent class or is there a different way I can prevent that div from being treated as part of the carousel i.e. (just left in place)?


You could try using the !important CSS rule on the .bar class properties you don't want to overwrite. But that's probably not the best use of the rule.

You could also try :not() with the Foo class selector.