javascript - 从面板中删除选定的项目 -JS

Question

下面是我的代码，它是这样工作的。当用户选择复选框时，它会附加所选的商品名称和价格，并根据用户输入的数量计算小计。

现在，当用户取消选择复选框时，取消选择的项目就会消失，并且总计会减少到旧总计(之前的总计)。

我想要实现的是，我下面的html可以图标fa fa-close，我希望它像取消选择复选框时那样执行。因此，当用户单击该图标时，它会删除相应的项目，并将总数减少到旧的总数

function order(food) {
  var ad = JSON.parse(food.dataset.food),
    existing;
  if (food.checked == true) {
    $('.panel').append(
      '<div class="container" style=" font-size:14px; "> ' +
      '<input type="hidden"  value=' + ad.id + ' data-id="' + ad.id + '"   name="food_id[]" />' +
      '<table style="width:100%;" class="table" id="tables">' +
      '<thead>' +
      '<thead>' +
      '<tbody id="item_list">' +
      '<tr>' +
      '<td  class="icon" ><a href="#"><i class="fa fa-close"></a></i></td>' +
      '<td  class="name" >' + ad.name + '</td>' +
      '<td  class="price" data-price="' + ad.price + '">' + ad.price + '</td>' +
      '<td><p class="total" ><span class="line-total" name="total" id="total"></span></p></td>' +
      '</tr>' +
      '</tbody>' +
      '</table>' +
      '</div>'
    )
  }
} else {
  var total = $(".panel .container [data-id=" + ad.id + "]").parent().find(".total").text();
  $(".panel .container [data-id=" + ad.id + "]").parent().remove();

  if (total) {
    $('.checkout span').text(function(index, oldtext) {
      console.log('this is my old text ' + oldtext)
      return oldtext ? oldtext - total : oldtext;
    });
  }
}



$('.panel').on('keyup', '.quantity', function() {
  order_container = $(this).closest('div');
  quantity = Number($(this).val());
  price = Number($(this).closest('div').find('.price').data('price'));
  points = Number($(this).closest('div').find('.points').data('points'));
  order_container.find(".total span").text(quantity * price);
  order_container.find(".pts-total span").text(quantity * points);
  sum = 0;
  points = 0;
  $(".line-total").each(function() {
    sum = sum + Number($(this).text());
  })
  $(".pts-total").each(function() {
    points = points + Number($(this).text());
  })
  $('.checkout span').text(sum);
});

Answer 1

您可以尝试这个简单的点击事件

$('.panel').on('click','.fa.fa-close',function(){
 $(this).closest('.container').remove();//remove the current element

 var sum = 0;
 $(".line-total").each(function(){
       sum = sum + Number($(this).text());
 });//calculate the new sum 
 $('.checkout span').text(sum);

})