jquery - 从元素中删除继承的类

Question

如何删除继承的类。我有一个带有 JavaScript 类 (js--main-nav) 的 UL。在 UL 中，我有一些 li(带有 class="socialIconHeader"的)我想从中删除继承的 js--main-nav 类。我已经尝试使用 CSS 和 jQuery 但是我无法让它工作。任何有关如何删除继承类的输入都将不胜感激。

<nav>
  <div class="row">
    <img src="assets/images/Logo_white.png" alt="ATCD Logo" class="logo" />
    <img src="assets/images/Logo_black.png" alt="ATCD Logo" class="logo-black" />
    <ul class="main-nav js--main-nav">
      <li> 
        <a href="#features">About</a>
      </li>
      <li> 
        <a href="#services">Services</a>
      </li>
      <li> 
        <a href="https://www.behance.net/" target="_blank">Portfolio</a>
      </li>
      <li> 
        <a href="#states">Locations</a>
      </li>
      <li> 
        <a href="#contact">Contact</a>
      </li>
      <li>
        <a href="http://atcdllc2.atcdllc.com/forum/">Forum</a>
      </li>
      <li></li>
      <li class="socialIconHeader">
        <a href="https://www.facebook.com/atcdllc">
          <i class="ion-social-facebook"></i>
        </a>
      </li>
      <li class="socialIconHeader">
        <a href="https://twitter.com/atcdllc">
          <i class="ion-social-twitter"></i>
        </a>
      </li>
      <li class="socialIconHeader">
        <a href="#">
          <i class="ion-social-googleplus"></i>
        </a>
      </li>
      <li class="socialIconHeader">
        <a href="https://www.linkedin.com">
          <i class="ion-social-linkedin"></i>
        </a>
      </li>
    </ul>
    <a class="mobile-nav-icon js--nav-icon">
      <i class="ion-navicon-round"></i>
    </a>
  </div>
</nav>

Answer 1

 $(".socialIconHeader").removeClass("js--main-nav");