CODEWITHSUNDEEP
javascripthtml
Joseph Smart
Joseph Smart

Reputation: 47

How to get Parent element

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>&times;<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> &times;<span class="itm-price">$200.00</span></p>
                        </div>
                        <button class="cart-item-remove">[ REMOVE ]</button>
                    </div>
                </div>
            </div>

Upvotes: 1

Views: 84

Answers (1)

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9953

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>&times;<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> &times;<span class="itm-price">$200.00</span></p>
            </div>
            <button class="cart-item-remove">[ REMOVE ]</button>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions