请帮帮我，当我从购物车中删除商品时，我希望更新总价[关闭]

Question

<section id="cart" class="section-p1">
            <table id="myTable" width="100%">
                <thead>
                <tr>
                    <td>Remove</td>
                    <td>Image</td>
                    <td>Product</td>
                    <td>Price</td>
                    <td>Quantity</td>
                    
                </tr>
            </thead>
            <tbody class="cart-items">
                <tr clas="cart-row">
                    <td class="delete"><input type="button" value="&times;"  onclick="deleteRow(this)"></td>
                    <td><img src="WEBpictures/ftpro shirt3.jpg" alt=""></td>
                    <td>Red Plain Sleeves shirt</td>
                    <td class="cart-price">$100</td>
                    <td class="quantity"><input type="number" value="1"></td>
              
                </tr>

                <tr clas="cart-row">
                    <td class="delete"><input type="button" value="&times;"  onclick="deleteRow(this)"></td>
                    <td><img src="WEBpictures/ftpro shirt2.jpg" alt=""></td>
                    <td>Red Plain Sleeves shirt</td>
                    <td class="cart-price">$100</td>
                    <td class="cart-quantity-input"><input type="number" value="1"></td>
                    
                </tr>
                </tr>

                <tr clas="cart-row">
                    <td class="delete"><input type="button" value="&times;"  onclick="deleteRow(this)"></td>
                    <td><img src="WEBpictures/ftpro shirt4.webp" alt=""></td>
                    <td>Red Plain Sleeves shirt</td>
                    <td class="cart-price">$100</td>
                    <td class="cart-quantity-input"><input type="number" value="1"></td>
                    
                </tr>
            </tbody>
            </table>
        </section>


        <section id="cart-add">
            <div id="coupon">
                <h3>Apply Coupon</h3>
                <div>
                    <input type="text" placeholder="Enter your coupon">
                    <button class="normal">Apply</button>
                </div>
            </div>

            <div id="subtotal">
                <h3>Cart Total</h3>
                <table>
                    
                        <td>Shipping</td>
                        <td>Free</td>
                    </tr>
                    <tr>
                        <td><strong>Total</strong></td>
                        <td class="cart-total">$300.00</td>
                    </tr>
                </table>

这是我的 HTML 代码，我希望能够删除一个项目并更新总价。

函数删除行（r）{ 变种我= r.parentNode.parentNode.rowIndex; document.getElementById("myTable").deleteRow(i); }

这是我的 Javascript 代码，我只能从购物车中删除商品，但还没有想出更新总数

Answer 1

你的问题的答案是：

首先读取总价去掉$符号以便能够将其转换为数字然后从中减去移除的项目价格，

要保留小数点，您需要使用 toFixed(2) 方法，

计算后在总价中再次加上您的$符号

这里是如何做到这一点：

function deleteRow(r) {
  const cartTotalEl = document.querySelector('.cart-total');

  var i = r.parentNode.parentNode.rowIndex;
  document.getElementById("myTable").deleteRow(i);
  let sum = Number(cartTotalEl.textContent.replace('$','')) - Number(r.parentNode.parentNode.querySelector('.cart-price').textContent.replace('$',''))
  cartTotalEl.textContent = `$ ${sum.toFixed(2)}`
}

<section id="cart" class="section-p1">
    <table id="myTable" width="100%">
        <thead>
            <tr>
                <td>Remove</td>
                <td>Image</td>
                <td>Product</td>
                <td>Price</td>
                <td>Quantity</td>

            </tr>
        </thead>
        <tbody class="cart-items">
            <tr clas="cart-row">
                <td class="delete"><input type="button" value="&times;" onclick="deleteRow(this)"></td>
                <td><img src="WEBpictures/ftpro shirt3.jpg" alt=""></td>
                <td>Red Plain Sleeves shirt</td>
                <td class="cart-price">$100</td>
                <td class="quantity"><input type="number" value="1"></td>

            </tr>

            <tr clas="cart-row">
                <td class="delete"><input type="button" value="&times;" onclick="deleteRow(this)"></td>
                <td><img src="WEBpictures/ftpro shirt2.jpg" alt=""></td>
                <td>Red Plain Sleeves shirt</td>
                <td class="cart-price">$100</td>
                <td class="cart-quantity-input"><input type="number" value="1"></td>

            </tr>
            </tr>

            <tr clas="cart-row">
                <td class="delete"><input type="button" value="&times;" onclick="deleteRow(this)"></td>
                <td><img src="WEBpictures/ftpro shirt4.webp" alt=""></td>
                <td>Red Plain Sleeves shirt</td>
                <td class="cart-price">$100</td>
                <td class="cart-quantity-input"><input type="number" value="1"></td>
            </tr>
        </tbody>
    </table>
</section>


<section id="cart-add">
    <div id="coupon">
        <h3>Apply Coupon</h3>
        <div>
            <input type="text" placeholder="Enter your coupon">
            <button class="normal">Apply</button>
        </div>
    </div>

    <div id="subtotal">
        <h3>Cart Total</h3>
        <table>

            <td>Shipping</td>
            <td>Free</td>
            </tr>
            <tr>
                <td><strong>Total</strong></td>
                <td class="cart-total">$300.00</td>
            </tr>
        </table>
    </div>

但是我不会硬编码总价，为了获得更好的功能，请保持代码动态，因此如果您决定再添加一件商品，价格也应该更新

Answer 2

function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
updateTotalPrice(); // call function to update the total price}

function updateTotalPrice() {
var cartItems = document.getElementsByClassName("cart-row");
var total = 0;
for (var i = 0; i < cartItems.length; i++) {
    var priceElement = cartItems[i].getElementsByClassName("cart-price")[0];
    var quantityElement = cartItems[i].getElementsByClassName("quantity")[0].getElementsByTagName("input")[0];
    var price = parseFloat(priceElement.innerText.replace("$", ""));
    var quantity = quantityElement.value;
    total += price * quantity;
}
document.getElementsByClassName("cart-total")[0].innerText = "$" + total.toFixed(2);}