Jquery. Удаление элемента из корзины

Question

Мне нужно чтобы при удалении заказа менялось значение в пункте Итого.

То есть, удаляю элемент со значением 350, а в Итого все равно остается 700, хотя должно остаться 350.

$(function() {
      $(".order-item button").on("click", function() {
        $(this).parent().parent().remove();
      })
    }

    $(function() {
      var sum = 0;
      var delivery = 0;
      var total = 0;
      $('.order-price span').each(function() {
        sum += parseInt($(this).html());
        sumReplace = '<b>' + sum + ' ₽</b>';
      })
      $('.summary').replaceWith(sumReplace);
      $('.total-right b').replaceWith(sumReplace);
      $('.ordering-choose .pickup').on("click", function() {
        delivery = -(sum * 0.2);
        deliveryReplace = '<b class="green">' + delivery + ' ₽</b>';
        $('.delivery .green').replaceWith(deliveryReplace);

        total = sum + delivery;
        totalReplace = '<b>' + total + ' ₽</b>';
        $('.total-right b').replaceWith(totalReplace);
      })


      $('.ordering-choose .delivery').on("click", function() {
        delivery = 0;
        deliveryReplace = '<b class="green">' + delivery + ' ₽</b>';
        $('.delivery .green').replaceWith(deliveryReplace);
        $('.total-right b').replaceWith(sumReplace);
      })
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="order-item">
  <div class="order-inner">
    <button><img src="img/delete.svg" alt=""></button>
    <div class="order-img"></div>
    <div class="order-name">Хачапури</div>
    <div class="range">
      <span class="min button">-</span>
      <input type="text" name="qty" class="qty1" maxlength="12" disabled />
      <span class="plus button">+</span>
    </div>
    <b class="order-price"><span>350</span> ₽</b>
  </div>
</div>
<div class="order-item">
  <div class="order-inner">
    <button><img src="img/delete.svg" alt=""></button>
    <div class="order-img"></div>
    <div class="order-name">Хачапури</div>
    <div class="range">
      <span class="min button">-</span>
      <input type="text" name="qty" class="qty1" maxlength="12" disabled />
      <span class="plus button">+</span>
    </div>
    <b class="order-price"><span>350</span> ₽</b>
  </div>
</div>


<div class="ordering-choose">
  <div class="buttons">
    <button class="delivery active">Доставка</button>
    <button class="pickup">Самовывоз (- 20%)</button>
  </div>
  <div class="total">
    <div class="total-left">
      <div class="sum">
        <b>Итого</b>
        <b class="summary">700 ₽</b>
      </div>
      <div class="delivery">
        <b>Доставка</b>
        <b class="green">0 ₽</b>
      </div>
    </div>
    <div class="total-right">
      <span>Итого к оплате</span>
      <b>700 ₽</b>
    </div>
  </div>
</div>

Answer 1

При удалении элемента не происходил вызов функции для пересчета суммарных значений. Попробуйте переделать код вот так:

$(function () {
  $(".order-item button").on("click", function () {
    $(this).parent().parent().remove();
    calc();
  })
})

function calc() {
  let sum = 0;
  var delivery = 0;
  var total = 0;
  $('.order-price span').each(function () {
    sum += parseInt($(this).html());
    sumReplace = '<b>' + sum + ' ₽</b>';
  })
  $('.summary').replaceWith(sumReplace);
  $('.total-right b').replaceWith(sumReplace);
  $('.ordering-choose .pickup').on("click", function () {
    delivery = -(sum * 0.2);
    deliveryReplace = '<b class="green">' + delivery + ' ₽</b>';
    $('.delivery .green').replaceWith(deliveryReplace);

    total = sum + delivery;
    totalReplace = '<b>' + total + ' ₽</b>';
    $('.total-right b').replaceWith(totalReplace);
  })

  $('.ordering-choose .delivery').on("click", function(){
    delivery = 0;
    deliveryReplace = '<b class="green">' + delivery + ' ₽</b>';
    $('.delivery .green').replaceWith(deliveryReplace);
    $('.total-right b').replaceWith(sumReplace);
  })
}

БЛОГ НА HUSL

Jquery. Удаление элемента из корзины

Ответы (1 шт):