Change HTML innerText in element with duplicates

January 26, 2023

I want to specifically change the innerText of the "quantity" div from this HTML:

<div class="shop" id="shop">
        <div id="1" class="item"> // Div nr. 1
          <div class="details">
            <div class="buttons">
              <div id="1" class="quantity"> // <-- Don't change this one!
            </div>
          </div>
        </div>
        <div id="2" class="item"> // Div nr. 2
          <div class="details">
            <div class="buttons">
              <div id="2" class="quantity"> // <-- Change this one!
            </div>
          </div>
        </div>
</div>

I tried using document.querySelector('.quantity').innerText = "". But that only changes the first occurring div with the class "quantity", which is within "Div nr. 1".

How do I specifically target the "quantity" class within "Div nr. 2"?

>Solution :

Given the html you provided, you can select the second .item and then descend to its .details like so:
document.querySelector('.item:nth-child(2) .quantity').innerText="";

https://jsfiddle.net/6L8gntmh/

It would be wise to make the id`s unique if you have access to the html. Then you would be able to select by their id.