從輸入上點擊

Question

刪除電話號碼與此相關的問題 Remove one of the added lines on click

現在我想，當我刪除行的總價格進行更新。我意識到我需要使用與我在總價中添加數字時所用的類似的東西，但我不知道如何執行此操作。

總之，當我添加一條線時，我希望將價格添加到總價中。當我刪除它時，我希望從總價格中扣除已刪除行上的數字。我需要一些幫助來了解如何從特定行中訪問addPrice和addAmount。

HTML

<div id="menu"> 
    <h3>Shopping list</h3> 
    <div class="line"> 
     <p class="title">Amount</p> 
     <p class="title">Product</p> 
     <p class="title">Price</p> 
     <div> 
      <input class='amountInput' type='number' name='quantity' min='0' max='1000' step='1'> 
      <input class='productInput' type="text" name="message" value=""> 
      <input class='priceInput' type='number' name='quantity' min='0' max='1000000' step='0.01'> 
      <button class="food">Add</button> 
     </div> 
     <div class="messages"> 
     </div> 
    </div> 
</div> 
<div class="totalPrice"> 
</div> 

jQuery的

$(document).ready(function() { 
    var totalPrice = 0; 
    $('.food').click(function() { 
    var $frm = $(this).parent(); 
    var toAdd = $frm.children(".productInput").val(); 
    var addPrice = $frm.children(".priceInput").val(); 
    var addAmount = $frm.children(".amountInput").val(); 
    var div = $("<div>"); 
    div.append("<p>" + addAmount + "</p>", "<p id='product'> " + toAdd + " </p>", "<p>" + addPrice + "</p>", "<p class='delete'>" + "X" + "</p>"); 
    $frm.parent().children(".messages").append(div); 
    totalPrice += addAmount * addPrice; 
    $(".totalPrice").text("Total Price: $" + totalPrice); 
    }); 
    $(document).on('click', '.delete', function() { 
    $(this).closest("div").remove(); 
    }); 
}); 

Answer 1

通過與您刪除該行的價格和數量，然後從總減去它。

$(document).ready(function() { 
 
    var totalPrice = 0; 
 

 
    $('.food').click(function() { 
 
    var $frm = $(this).parent(); 
 
    var toAdd = $frm.children(".productInput").val(); 
 
    var addPrice = $frm.children(".priceInput").val(); 
 
    var addAmount = $frm.children(".amountInput").val(); 
 

 
    var div = $("<div>"); 
 
    div.append("<p class='amount'>" + addAmount + "</p>", "<p class='product'> " + toAdd + " </p>", "<p class='price'>" + addPrice + "</p>", "<p class='delete'>" + "X" + "</p>"); 
 

 
    $frm.parent().children(".messages").append(div); 
 

 
    totalPrice += addAmount * addPrice; 
 

 
    $(".totalPrice").text("Total Price: $" + totalPrice); 
 
    }); 
 

 
    $(document).on("click", ".delete", function() { 
 
    var subAmount = parseFloat($(this).siblings(".amount").text()); 
 
    var subPrice = parseFloat($(this).siblings(".price").text()); 
 
    totalPrice -= subAmount * subPrice; 
 
    $(".totalPrice").text("Total Price: $" + totalPrice); 
 

 
    $(this).closest("div").remove(); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="menu"> 
 
    <h3>Shopping list</h3> 
 
    <div class="line"> 
 
    <p class="title">Amount</p> 
 
    <p class="title">Product</p> 
 
    <p class="title">Price</p> 
 
    <div> 
 
     <input class='amountInput' type='number' name='quantity' min='0' max='1000' step='1'> 
 
     <input class='productInput' type="text" name="message" value=""> 
 
     <input class='priceInput' type='number' name='quantity' min='0' max='1000000' step='0.01'> 
 
     <button class="food">Add</button> 
 
    </div> 
 
    <div class="messages"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="totalPrice"> 
 
</div>

我還指定類的數量和價格因素，所以我不必硬編碼它們在DIV位置。

順便說一句，你不應該在行中使用id='product'，因爲你正在創建多個具有相同ID的元素。 ID應該是唯一的。我已經將它改爲一堂課。

Answer 2

如何在數據對象中存儲每個添加的div的價格？

var div = $("<div>"); 
div.data("price", addAmount * addPrice); 

然後再次訪問它在刪除事件：

$(document).on('click', '.delete', function() { 
    var div = $(this).closest("div"); 
    totalPrice -= div.data("price"); 
    div.remove(); 
}