CODEWITHSUNDEEP
javascriptjquery
Naomi
Naomi

Reputation: 1298

Remove number from input on click

In connection to this question Remove one of the added lines on click

I now want the total price to be updated when I remove the line. I realise that I need to use something similar to what I've used when I add a number to the total price but I don't know how to do this.

In short, when I add a line I want the price to be added on to the total price. When I am removing it I want the number that was on the removed line subtracted from the total price.I would need some help in how to access the addPrice and addAmount from a specific line.

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

Upvotes: 0

Views: 199

Answers (2)

Barmar
Barmar

Reputation: 780869

Get the price and amount from the row you're deleting, and then subtract it from the total.

$(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>

I've also assigned classes to the amount and price elements so I don't have to hard-code their positions in the DIV.

BTW, you shouldn't use id='product' in the row, because you're creating multiple elements with the same ID. IDs are supposed to be unique. I've changed it to a class.

Upvotes: 1

ZabutonNage
ZabutonNage

Reputation: 11

What about storing the price for each added div in its data object?

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

Then access it again in the delete event:

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

Upvotes: 0

Related Questions