Updating a total after removing from the cart

Good evening guys, this is my first time using Stackoverflow, so please be kind.

I have been working on a restaurant order-type app for staff.

When I delete an item from the cart I would like the total to update.

I know there is probably a simple solution but any help would be much appreciated.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let subtotal = 0;

function Delete(currentEl) {
  currentEl.parentNode.parentNode.removeChild(currentEl.parentNode);
}

const calculateserviceCharge = subtotal => {
  const serviceCharge = subtotal * .12;
  const formattedserviceCharge = serviceCharge.toFixed(2);
  return formattedserviceCharge;
};

const calculateTotal = subtotal => {
  const serviceCharge = calculateserviceCharge(subtotal);
  const total = parseFloat(subtotal) + parseFloat(serviceCharge);
  const formattedTotal = total.toFixed(2);

  return formattedTotal;
};

$('.btn').on('click', function() {
  const title = $(this).data('title');
  const price = $(this).data('price');

  const element = `
    <p class="cart-item-heading ">${title} £${price}   <button id="delete" onclick="Delete(this);">X</button>`;

  $('.cart-items').append(element);


  subtotal = subtotal + price;

  const formattedSubtotal = subtotal.toFixed(2.3);
  const serviceCharge = calculateserviceCharge(subtotal);
  const total = calculateTotal(subtotal);

  $('.cart-math').html(`
    <p class="cart-math-item">
    <span class="cart-math-header">Subtotal:</span>
    <span class="g-price subtotal">
    <break>
    £${formattedSubtotal}</span>
    </p>
    <p class="cart-math-item">
    <span class="cart-math-header">Service Charge(12%):</span>
    <span class="g-price tax">£${serviceCharge}</span>
    </p>
    <p class="cart-math-item">
    <span class="cart-math-header">Total:</span>
    <span class="g-price total">£${total}</span>
    </p>
    
    `);
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='hide-3' id="hide" style="background-color: #edb90f">Close</button>
<div class="mains" id="subject">
  <div id="cart-items" class="screen-cart">
    <h2>Your Order</h2>
    <ul class="cart-items" id="cart-items" ">
        </ul>
    
        <div class="cart-math " id="cart-math "">

  </div>
</div>
<button class="btn" style="background-color: #edb90f" data-title="Duck" data-price="21.95">Duck
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Chicken" data-price="18.95">Chicken
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Salmon Fillet" data-price="19.95">Salmon Fillet
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Orzotto" data-price="12.95">Orzotto
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Vegan Burger" data-price="15.45">Vegan Burger
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Sea Bass" data-price="16.95">Sea Bass
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Classic Burger" data-price="15.45">Classic Burger
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Tuna" data-price="22.95">Tuna
    </button>
<button class="btn" style="background-color: #edb90f" data-title="Whole Sea Bream" data-price="49.95">Whole Sea Bream
    </button>
</div>
</dialog>

<!-- end snippet -->

There are many solutions. Here is mine, I see that your btn has the price as a data attribute. So instead of adding/subtracting just recalculate each time you add an item or remove it.

Loop through the buttons adding to a local variable the price from the button. Do your service charges etc.. in the same function then output it to your div.

You can see it working by clicking my remove buttons.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const calculateserviceCharge = subtotal => {
  const serviceCharge = subtotal * .12;
  const formattedserviceCharge = serviceCharge.toFixed(2);
  return formattedserviceCharge;
};

function calcTotal() {
  let subtotal = 0;

  $('.btn').each(function() {
    subtotal += $(this).data('price');
  })
  
  const formattedSubtotal = subtotal.toFixed(2.3);
  const serviceCharge = calculateserviceCharge(subtotal);
  const total = (parseFloat(serviceCharge) + parseFloat(subtotal)).toFixed(2.3);

  $('.cart-math').html(`
                        <p class="cart-math-item">
                        <span class="cart-math-header">Subtotal:</span>
                        <span class="g-price subtotal">
                        <break>
                        £${formattedSubtotal}</span>
                        </p>
                        <p class="cart-math-item">
                        <span class="cart-math-header">Service Charge(12%):</span>
                        <span class="g-price tax">£${serviceCharge}</span>
                        </p>
                        <p class="cart-math-item">
                        <span class="cart-math-header">Total:</span>
                        <span class="g-price total">£${total}</span>
                        </p>
                        
                        `);

}

calcTotal();

$(".btn").on("click", function() {
  $(this).remove();
  calcTotal();
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn" data-price="5">REMOVE 5</button>
<button class="btn" data-price="15">REMOVE 15</button>
<button class="btn" data-price="3">REMOVE 3</button>

<div class="cart-math"></div>

<!-- end snippet -->

Just call the function that calculates your total everytime you delete from the cart.

I would rather edit my HTML as HTML so I used a pair of <template elements for the totals and new items.
Then I add the totals and the individual items where they should be.

When I add a new item. I trigger an event to update the totals by whatever items are in the cart at that time so an add or a delete, I just trigger that event on the cart to update.

Just because, I added some CSS to make it slightly more presentable that just the raw html; but also this shows what is where slightly better.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const totalTemplate = document.getElementById("cartTotal");
const itemTemplate = document.getElementById("cartItem");

function deleteItem(event) {
  $(this).closest('.cart-item-container').remove();
  cart.trigger('update-ticket');
}

function addItem(title, price) {
  const cart = $('#cart-items');
  const newItem = itemTemplate.content.firstElementChild.cloneNode(true);
  cart[0].appendChild(newItem);
  const newCart = cart.find('.cart-item-container').last();
  newCart.data("cost", price)
    .find('.cart-item-heading').html(title);
  newCart.find('.price-value').html(price);

  cart.trigger('update-ticket');
}

function getSubtotal(el) {
  return el.dataset.subtotal * 1;
}

function setup() {
  const t = totalTemplate.content.firstElementChild.cloneNode(true);
  document.querySelector('.cart-math').appendChild(t);
}

function getCost(cart) {
  let sum = 0;
  cart.find('.cart-item-container').each(function(e) {
    sum = sum + ($(this).data('cost') * 1);
  });
  return sum;
}
const calculateserviceCharge = subtotal => {
  const serviceCharge = subtotal * .12;
  const formattedserviceCharge = serviceCharge.toFixed(2);
  return formattedserviceCharge;
};

const calculateTotal = subtotal => {
  const serviceCharge = calculateserviceCharge(subtotal);
  const total = parseFloat(subtotal) + parseFloat(serviceCharge);
  const formattedTotal = total.toFixed(2);
  return formattedTotal;
};

const cart = $('#cart-items')
  .on('update-ticket', function() {
    let subtotal = getCost($(this));
    const formattedSubtotal = subtotal.toFixed(2.3);
    const serviceCharge = calculateserviceCharge(subtotal);
    const total = calculateTotal(subtotal);
    $('.cart-math').find('.subtotal-value').html(formattedSubtotal);
    $('.cart-math').find('.tax-value').html(serviceCharge);
    $('.cart-math').find('.total-value').html(total);
  })
  .on('click', '.delete', deleteItem);

$('.btn.food-item').on('click', function(event) {
  const title = $(this).data('title');
  const price = $(this).data('price');
  addItem(title, price);
});
setup();

<!-- language: lang-css -->

body {
  font-size: 16px;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

.screen-cart-container {
  display: grid;
  place-items: center;
}

.food-item {
  background-color: #edb90f;
}

.order-header {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

.cart-items .cart-item-container {
  border: solid 1px #00000033;
  display: grid;
  grid-template-columns: 6em 3em 2em;
  grid-auto-rows: minmax(3em, auto);
  gap: 0.25em;
  align-items: center;
  padding: 0.25em;
}

.total-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 2em);
  place-items: center;
  gap: 1em;
  border: 1px solid green;
  padding: 1em;
}

.menu-container {
  display: flex;
  gap: 0.25em;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dialog">
  <button class='hide-3' id="hide" style="background-color: #edb90f">Close</button>
  <div class="mains" id="subject">
    <div id="cart-container" class="screen-cart screen-cart-container">
      <div class="order-header">Your Order</div>
      <div class="cart-items" id="cart-items">
      </div>
      <div class="cart-math">
      </div>
    </div>
    <div class="menu-container">
      <button class="btn food-item" type="button" data-title="Duck" data-price="21.95">Duck
    </button>
      <button class="btn food-item" type="button" data-title="Chicken" data-price="18.95">Chicken
    </button>
      <button class="btn food-item" type="button" data-title="Salmon Fillet" data-price="19.95">Salmon Fillet
    </button>
      <button class="btn food-item" type="button" data-title="Orzotto" data-price="12.95">Orzotto
    </button>
      <button class="btn food-item" type="button" data-title="Vegan Burger" data-price="15.45">Vegan Burger
    </button>
      <button class="btn food-item" type="button" data-title="Sea Bass" data-price="16.95">Sea Bass
    </button>
      <button class="btn food-item" type="button" data-title="Classic Burger" data-price="15.45">Classic Burger
    </button>
      <button class="btn food-item" type="button" data-title="Tuna" data-price="22.95">Tuna
    </button>
      <button class="btn food-item" type="button" data-title="Whole Sea Bream" data-price="49.95">Whole Sea Bream
    </button>
    </div>
  </div>
</div>
<template id="cartItem">
<div class="cart-item-container" data-cost="${price}">
    <div class="cart-item-heading"></div><div>£<span class='price-value'></span></div><button type="button" class="delete">X</button></div>
</template>
<template id="cartTotal">
  <div class="total-container">
    <div class="cart-math-item">
    <span class="cart-math-header">Subtotal:</span>
    <span class="g-price subtotal">£<span class="subtotal-value"></span>
       </span>
    </div>
    <div class="cart-math-item">
    <span class="cart-math-header">Service Charge(12%):</span>
    <span class="g-price tax">£<span class="tax-value"></span></span>
    </div>
    <div class="cart-math-item">
    <span class="cart-math-header">Total:</span>
    <span class="g-price total">£<span class="total-value"></span></span>
      </div>
  </div>
</template>

<!-- end snippet -->