How to console.log the innerText from elements that were removed?

Question

In my updateCartTotal() function I want to console.log the elements that were removed from my shopping cart.

Each time I press the remove button, I want it to print out the item , and price . However, whenever I do it it returns undefined. And in some instances it only recognizes 1 item only. I don't think there is a problem with my JavaScript code rather it may be my HTML

const updateCartTotal = () => {
    var cartItemContainer = document.getElementsByClassName('cart-items')[0]
    var cartRows = cartItemContainer.getElementsByClassName('cart-row')

    for(var i = 0; i < cartRows.length; i++){
        var cartRow = cartRows[i];
        var itemElement= cartRow.getElementsByClassName('cart-item')[0].innerHTML
        var priceElement = cartRow.getElementsByClassName('cart-price')[0].innerHTML
        var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]

        var item = itemElement.innerText
        var price = priceElement.innerText
        // var quantity = quantityElement.value
        console.log(item, price)
    }
}

<section class="container shopping-cart">
    <div class="title">Cart</div>
    <div class="cart-row">
        <span class="cart-item cart-header cart-column">ITEM</span>
        <span class="cart-price cart-header cart-column">PRICE</span>
        <span class="cart-quantity cart-header cart-column">QUANTITY</span>
    </div>
    <div class="cart-items">
        <div class="cart-row">
            <div class="cart-item">
                <span class="cart-item-title">Item 1</span>
            </div>
            <span class="cart-price ">$14.99</span>
            <div class="cart-quantity-input">
                <input type="number" value="1">
                <button class="btn btn-danger ml-5" type="button">REMOVE</button>
            </div>
        </div>
        <div class="cart-row">
            <div class="cart-item">
                <span class="cart-item-title ">Item 2</span>
            </div>
            <span class="cart-price">$79.99</span>
            <div class="cart-quantity-input">
                <input type="number" value="2">
                <button class="btn btn-danger ml-5" type="button">REMOVE</button>
            </div>
        </div>
    </div>
</section>

Answer 1

I could not see how your current code was console logging the values based on the button click. So I created the function removeItem() that acheives the functionality you want. Use this solution to add the functionality to your code.

See the Code Pen for a solution.

https://codepen.io/ianroskow/pen/WNeagXQ

On the onclick of the remove button, I pass the context and then traverse the dom to console log the desired values.

I used closest to find the parent node, and query selector to find the child.

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

 const updateCartTotal = () => { var cartItemContainer = document.getElementsByClassName('cart-items')[0] var cartRows = cartItemContainer.getElementsByClassName('cart-row') for(var i = 0; i < cartRows.length; i++){ var cartRow = cartRows[i]; var itemElement= cartRow.getElementsByClassName('cart-item')[0].innerHTML var priceElement = cartRow.getElementsByClassName('cart-price')[0].innerHTML var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0] var item = itemElement.innerText var price = priceElement.innerText // var quantity = quantityElement.value console.log(item, price) } } function removeItem(element){ const cartRow = element.closest(".cart-row"); console.log(cartRow.querySelector(".cart-item-title").innerHTML); console.log(cartRow.querySelector(".cart-price").innerHTML); cartRow.parentNode.removeChild(cartRow); }

 <section class="container shopping-cart"> <div class="title">Cart</div> <div class="cart-row"> <span class="cart-item cart-header cart-column">ITEM</span> <span class="cart-price cart-header cart-column">PRICE</span> <span class="cart-quantity cart-header cart-column">QUANTITY</span> </div> <div class="cart-items"> <div class="cart-row"> <div class="cart-item"> <span class="cart-item-title">Item 1</span> </div> <span class="cart-price ">$14.99</span> <div class="cart-quantity-input"> <input type="number" value="1"> <button class="btn btn-danger ml-5" onclick="removeItem(this)" type="button">REMOVE</button> </div> </div> <div class="cart-row"> <div class="cart-item"> <span class="cart-item-title ">Item 2</span> </div> <span class="cart-price">$79.99</span> <div class="cart-quantity-input"> <input type="number" value="2"> <button class="btn btn-danger ml-5" onclick="removeItem(this)" type="button">REMOVE</button> </div> </div> </div> </section>

Answer 2

item and price will not be elements. They are strings representing the innerHTML of the elements.
To get the item name, simply use cartRow.getElementsByClassName('cart-item -title ')[0].innerHTML .
To get the price, use cartRow.getElementsByClassName('cart-price')[0].innerHTML .

Do NOT use innerText, as this will cause an error since item and price are already strings.

 const updateCartTotal = () => { var cartItemContainer = document.getElementsByClassName('cart-items')[0] var cartRows = cartItemContainer.getElementsByClassName('cart-row') for (var i = 0; i < cartRows.length; i++) { var cartRow = cartRows[i]; var item = cartRow.getElementsByClassName('cart-item-title')[0].innerHTML var price = cartRow.getElementsByClassName('cart-price')[0].innerHTML var quantity = cartRow.getElementsByClassName('cart-quantity-input')[0] console.log(" Item: " + item + "\n" + "Price: " + price) } } updateCartTotal();

 <section class="container shopping-cart"> <div class="title">Cart</div> <div class="cart-row"> <span class="cart-item cart-header cart-column">ITEM</span> <span class="cart-price cart-header cart-column">PRICE</span> <span class="cart-quantity cart-header cart-column">QUANTITY</span> </div> <div class="cart-items"> <div class="cart-row"> <div class="cart-item"> <span class="cart-item-title">Item 1</span> </div> <span class="cart-price ">$14.99</span> <div class="cart-quantity-input"> <input type="number" value="1"> <button class="btn btn-danger ml-5" type="button">REMOVE</button> </div> </div> <div class="cart-row"> <div class="cart-item"> <span class="cart-item-title">Item 2</span> </div> <span class="cart-price">$79.99</span> <div class="cart-quantity-input"> <input type="number" value="2"> <button class="btn btn-danger ml-5" type="button">REMOVE</button> </div> </div> </div> </section>