I'm trying to get the parent element of cartError so I can access the particular cart-item-details where the cart-item-size and itm-quantity is... because I'm looping through the cart to if a new cart item is added with the same size increase quantity from 1 to 2
var cartItems = document.getElementsByClassName('side-cart- items')[0]
var cartItemSizes = cartItems.getElementsByClassName("cart-item-size")
for(var i=0; i < cartItemSizes.length;i++){
cartError=cartItemSizes[i]
if(cartError.innerText== size){
var cartItem = cartError.parentElement
var cartQuantity = cartError.getElementsByClassName('itm-quantity')
console.log(cartQuantity.innerText)
return
}
}<div class="section side-cart-items">
<div class="side-cart-item">
<div class="cart-item-image">
<img src="./images/product/SASSI-HOLFORD-RTW-SS21-AQUAREMARINE-PEARL-DUNSTER-TOP-DUNSTER-SHORTS-2-1154x1600.jpg" alt="">
</div>
<div class="cart-item column">
<div class="cart-item-details">
<h2>Dunster Shorts</h2>
<p>size <span class="cart-item-size">36</span></p>
<p><span class="itm-quantity">1 </span>×<span class="itm-price">$285.00</span></p>
</div>
<button class="cart-item-remove">[ REMOVE ]</button>
</div>
</div>
<div class="side-cart-item">
<div class="cart-item-image">
<img src="./images/product/SASSI-HOLFORD-RTW-SS21-AQUAREMARINE-PEARL-DUNSTER-TOP-DUNSTER-SHORTS-2-1154x1600.jpg" alt="">
</div>
<div class="cart-item column">
<div class="cart-item-details">
<h2>Dunster Shorts</h2>
<p>size <span class="cart-item-size">40</span></p>
<p><span class="itm-quantity">1</span> ×<span class="itm-price">$200.00</span></p>
</div>
<button class="cart-item-remove">[ REMOVE ]</button>
</div>
</div>
</div>Note that parent element of cartError is p tag not cart-item-details. Actually you need to use cartError.parentElement.parentElement to access the cart-item-details and then use cartItem.getElementsByClassName('itm-quantity'); to access the all itm-quantity tags:
var size = "36";
var cartItems = document.getElementsByClassName('side-cart-items')[0]
var cartItemSizes = cartItems.getElementsByClassName("cart-item-size");
for (var i = 0; i < cartItemSizes.length; i++) {
cartError = cartItemSizes[i]
if (cartError.innerText == size) {
var cartItem = cartError.parentElement.parentElement
var cartQuantity = cartItem.getElementsByClassName('itm-quantity');
for (let item of cartQuantity) {
console.log(item.innerText);
}
}
}<div class="section side-cart-items">
<div class="side-cart-item">
<div class="cart-item-image">
<img src="./images/product/SASSI-HOLFORD-RTW-SS21-AQUAREMARINE-PEARL-DUNSTER-TOP-DUNSTER-SHORTS-2-1154x1600.jpg" alt="">
</div>
<div class="cart-item column">
<div class="cart-item-details">
<h2>Dunster Shorts</h2>
<p>size <span class="cart-item-size">36</span></p>
<p><span class="itm-quantity">1 </span>×<span class="itm-price">$285.00</span></p>
</div>
<button class="cart-item-remove">[ REMOVE ]</button>
</div>
</div>
<div class="side-cart-item">
<div class="cart-item-image">
<img src="./images/product/SASSI-HOLFORD-RTW-SS21-AQUAREMARINE-PEARL-DUNSTER-TOP-DUNSTER-SHORTS-2-1154x1600.jpg" alt="">
</div>
<div class="cart-item column">
<div class="cart-item-details">
<h2>Dunster Shorts</h2>
<p>size <span class="cart-item-size">40</span></p>
<p><span class="itm-quantity">1</span> ×<span class="itm-price">$200.00</span></p>
</div>
<button class="cart-item-remove">[ REMOVE ]</button>
</div>
</div>
</div>