配列から値を削除し、新しい配列の合計でhtmlを更新するか、合計がない場合は '$'を更新する

Question

2つの入力、デビットとクレジットがあり、ボタンをクリックすると 'debits'という配列が更新されます。デビットは正の値を追加し、クレジットは負の値を追加します。

次に、配列の値を変数 'totalDebits'に合計し、その変数を使用して 'totalOutput'のhtmlを更新します。

私の目標は、アイコン[ - ]をクリックすることです。デビットを削除すると、その値が配列から減算され、合計出力が更新されます。クレジットが削除されると、その負の値が配列から削除されます。

スプライス。（）と.inArray（）メソッドを使用してみましたが、何らかの理由で私がデビットを削除すると、配列全体が空になります。

ここに私が試したスニペットとjsFiddleがありますので、問題を見ることができます。

//CLOSE BUT NO CIGAR, - 
    $(document).ready(function() 
    { 
      $(document).on('click','.fa-minus-square', 
      function() 
      { 

       var thisVal = Number($(this).parent().attr('value')); 

       if ($(this).parent().hasClass('debitItem')){ 

        debits.splice($.inArray(thisVal, debits) ,1); 

        $(this).parent().remove(); 

        console.log(debits); 

       } else if ($(this).parent().hasClass('creditItem')) { 

        debits.splice($.inArray(-thisVal, debits) ,1); 

        $(this).parent().remove(); 

       }; 

      } 

); 
     }); 

https://jsfiddle.net/agraymd/pbtof136/4/

コンソールを見たときに私がやりたいようだが、それがクリックされた借方の値を削除した後、配列が空になるまでそれだけで削除し続けます。

私はtotalOutputを自分で更新するところまで到達することができますが、配列を正しく更新していなかったので、コードのその部分を削除しました。

私は私の説明と正しい用語を使用して明確になることを希望します。私はまだ初心者くさい:)

---

---

は、ここで私はそれを削除するのではなく、借方の配列にデビットカードまたはクレジットの逆の値を追加し、新たなフィドルですよ。それを取り除くのが良いと思う。 https://jsfiddle.net/agraymd/pbtof136/

---

Answer 1

あなたは全体マッチしたセットに設定する前に、既存のonclickイベントハンドラをバインド解除する必要があります。これは、ボタンがn回（n =この後に追加された項目の数）クリックされたかのようですが、実際にはn回クリックされたため、n回呼び出されます。

変更この：

$(document).on('click','.fa-minus-square', 
     function() 
     { 
     ... 
     }); 

へ：私はthis fiddleに適切な変更を行った

$('.fa-minus-square').unbind().click(function() 
      { 
       ... 
      }); 

。