从输入上点击

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(); 
}