Add a class in javascript without targeting the parent element

January 5, 2022

I have a problem with this piece of code:

document.querySelector('.location__list-link[data-area-id="'+areaId+'"]').parentElement.classList.add("plop");

I actually want to add the "plop" class to ".location__list-link" but I have a second class behind it. This last class should not be taken into account.

The HTML is :

<div class="location__wrapper">
  <div class="location__content">
    <ul class="location__list">
      <li class="location__list-item"><a data-area-id="1" class="location__list-link fond-bleu" href="https://www.antibes-juanlespins.com/">Antibes Juan-les-Pins</a></li>
      <li class="location__list-item" ><a data-area-id="22" class="location__list-link fond-vert" href="http://bezaudun.fr/">Bézaudun-les-Alpes</a></li>
      <li class="location__list-item" ><a data-area-id="3" class="location__list-link fond-bleu" href="https://www.biot.fr/">Biot</a></li>
      <li class="location__list-item"><a data-area-id="21" class="location__list-link fond-vert" href="https://bouyon.fr/">Bouyon</a></li>
    </ul>
  </div>
</div>

And I don’t know how to add a second class to my selection or what to do about .parentElement because when I delete it it doesn’t work at all.
Thank you in advance 🙂

>Solution :

Just remove parentElement and it works as one would expect. You can completely ignore the other class listed on the element:

const areaId=3
document.querySelector('.location__list-link[data-area-id="'+areaId+'"]').classList.add("plop");

.plop{ background-color:red}

<div class="location__wrapper">
  <div class="location__content">
    <ul class="location__list">
      <li class="location__list-item"><a data-area-id="1" class="location__list-link fond-bleu" href="https://www.antibes-juanlespins.com/">Antibes Juan-les-Pins</a></li>
      <li class="location__list-item"><a data-area-id="22" class="location__list-link fond-vert" href="http://bezaudun.fr/">Bézaudun-les-Alpes</a></li>
      <li class="location__list-item"><a data-area-id="3" class="location__list-link fond-bleu" href="https://www.biot.fr/">Biot</a></li>
      <li class="location__list-item"><a data-area-id="21" class="location__list-link fond-vert" href="https://bouyon.fr/">Bouyon</a></li>
    </ul>
  </div>
</div>