CODEWITHSUNDEEP
jquery
Rob
Rob

Reputation: 6380

Removing an attribute from a parent element but not a child element

I want to remove the href attribute from the second li but not the child li's, how can that be done?

At the moment it's removing the attribute from the second li and the li with "Anaesthesia Breathing Systems" in it.

Where am I going wrong?

Here's my jquery: 

$('.primary-menu-1 li:nth-child(2) > a').removeAttr('href');

Here's the menu's html (it's generated by Wordpress):

<ul class="primary-menu-1">
  <li>
    <a href="https://company-test.local/" class="menu-image-title-after"><span class="menu-image-title">Home</span></a>
  </li>
  <li>
    <a href="https://company-test.local/products" class="menu-image-title-after"><span class="menu-image-title">Products</span></a>
    <ul>
        <li id="menu-item-8486" class="menu-item menu-item-type-taxonomy menu-item-object-categories">
        <a href="https://company-test.local/categories/airway-management/" class="menu-image-title-below menu-image-not-hovered">
          <span class="menu-image-title">Airway Management</span>
        </a></li>
      <li>
        <a href="https://company-test.local/categories/breathing-filters/" class="menu-image-title-below menu-image-not-hovered">
          <span class="menu-image-title">Anaesthesia Breathing Systems</span>
        </a>
      </li>
      <li>
        <a href="https://company-test.local/categories/breathing-filters/" class="menu-image-title-below menu-image-not-hovered">
          <span class="menu-image-title">Anaesthesia Components</span>
        </a>
      </li>
      <li>
        <a href="https://company-test.local/categories/breathing-filters/" class="menu-image-title-below menu-image-not-hovered">
          <span class="menu-image-title">Breathing Filters</span>
        </a>
      </li>
      <li>
        <a href="https://company-test.local/categories/oxygen-aerosol-therapy/" class="menu-image-title-below menu-image-not-hovered">
          <span class="menu-image-title">Oxygen &amp; Aerosol Therapy</span>
        </a>
      </li>
      <li>
        <a href="https://company-test.local/categories/ventilator-breathing-systems/" class="menu-image-title-below menu-image-not-hovered">
          <span class="menu-image-title">Ventilator Breathing Systems</span>
        </a>
      </li>
      <li>
        <a href="https://company-test.local/categories/resuscitation/" class="menu-image-title-below menu-image-not-hovered">
          <span class="menu-image-title">Resuscitation</span>
        </a>
      </li>
      <li>
        <a href="https://company-test.local/categories/suction/" class="menu-image-title-below menu-image-not-hovered">
          <span class="menu-image-title">Suction</span>
        </a>
      </li>
      <li>
        <a href="http://mycompany.com" class="menu-image-title-below menu-image-not-hovered">
          <span class="menu-image-title">Urology</span>
        </a>
      </li>
      <li class="product-up"><a href="#" class=""></a></li>
    </ul>
  </li>
</ul>

Upvotes: 1

Views: 120

Answers (2)

Khang Tran
Khang Tran

Reputation: 2315

Try this:

$('.primary-menu-1 > li:nth-child(2) > a').removeAttr('href');

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

You need to change your selection from:

$('.primary-menu-1 li:nth-child(2) > a')

to:

$('.primary-menu-1 > li:nth-child(2) > a')

Child Selector: (“parent > child”)

Select all the a elements having the href attribute belonging to the child ul/li. Hence you can get the second one:

$('.primary-menu-1 > li:nth-child(2) > a').addClass('red');
.red {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul class="primary-menu-1">
    <li>
        <a href="https://company-test.local/" class="menu-image-title-after"><span class="menu-image-title">Home</span></a>
    </li>
    <li>
        <a class="menu-image-title-after"><span class="menu-image-title">Products</span></a>
        <ul>
            <li id="menu-item-8486" class="menu-item menu-item-type-taxonomy menu-item-object-categories">
                <a href="https://company-test.local/categories/airway-management/" class="menu-image-title-below menu-image-not-hovered">
                    <span class="menu-image-title">Airway Management</span>
                </a></li>
            <li>
                <a class="menu-image-title-below menu-image-not-hovered">
                    <span class="menu-image-title">Anaesthesia Breathing Systems</span>
                </a>
            </li>
            <li>
                <a class="menu-image-title-below menu-image-not-hovered">
                    <span class="menu-image-title">Anaesthesia Components</span>
                </a>
            </li>
            <li>
                <a href="https://company-test.local/categories/breathing-filters/" class="menu-image-title-below menu-image-not-hovered">
                    <span class="menu-image-title">Breathing Filters</span>
                </a>
            </li>
            <li>
                <a href="https://company-test.local/categories/oxygen-aerosol-therapy/" class="menu-image-title-below menu-image-not-hovered">
                    <span class="menu-image-title">Oxygen &amp; Aerosol Therapy</span>
                </a>
            </li>
            <li>
                <a href="https://company-test.local/categories/ventilator-breathing-systems/" class="menu-image-title-below menu-image-not-hovered">
                    <span class="menu-image-title">Ventilator Breathing Systems</span>
                </a>
            </li>
            <li>
                <a href="https://company-test.local/categories/resuscitation/" class="menu-image-title-below menu-image-not-hovered">
                    <span class="menu-image-title">Resuscitation</span>
                </a>
            </li>
            <li>
                <a href="https://company-test.local/categories/suction/" class="menu-image-title-below menu-image-not-hovered">
                    <span class="menu-image-title">Suction</span>
                </a>
            </li>
            <li>
                <a href="http://mycompany.com" class="menu-image-title-below menu-image-not-hovered">
                    <span class="menu-image-title">Urology</span>
                </a>
            </li>
            <li class="product-up"><a href="#" class=""></a></li>
        </ul>
    </li>
</ul>

Upvotes: 2

Related Questions