最後のアイテムを削除jquery

ボタンをクリックすると、結果が別のdivに追加され、クリックごとに増加します。最後のアイテムを削除jquery

[最後の削除]ボタンをクリックすると、追加されたdivは削除されますが、合計は調整されません。

私は幸運のない機能について何度も見てきました。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Remove last</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 


    </head> 
    <body onLoad="renderTime();"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-4" id="printarea" > 
       <div id="print-container"> 
        <div class="item"></div> 
        <div class="total"></div> 
       </div> 
      </div> 
      <div class="col-xs-8"> 
       <ul class="final"> 
        <li class="remove"><a href="#"><input type="submit" value="Remove Last" class="print-btn remove-item"></a></li> 
        <li class="remove"><a href="#"><input type="submit" value="Remove All" class="print-btn" data-corners="false" id="submit" onclick="refresh()"></a></li> 
       </ul> 
       <hr /> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <div class="box"> 
        <div class="content"> 
         <ul class="sub-menu"> 
          <li><a href="#"><button class="menu item1">Item 1</button></a></li> 
          <li><a href="#"><button class="menu item2">Item 2</button></a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script type="text/javascript"> 

     //add item 
     $('.item1').click(function(){ 
      $('<div class="delete">Item 1 - <span class="skill"> 840</span></div><br />').appendTo('.item'); 

      counter(); 
     }); 
     $('.item2').click(function(){ 
      $('<div class="delete">Item 2 - <span class="skill"> 910</span></div><br />').appendTo('.item'); 

      counter(); 
     }); 

     //remove last item 
     $('.remove-item').click(function(){ 
      $(".delete:last").remove(); 
     }); 
    </script> 

    <script type="text/javascript"> 
     function refresh() { 

      setTimeout(function() { 
       location.reload() 
      }, 100); 
     } 
    </script> 

     <script type="text/javascript"> 

     var counter = function() { 

      var total = 0; 

      $(".skill").each(function() { 

       total += +$(this).text(); 
      }); 

      $('.total').text('Total: ' + total); 
     }; 

    </script> 
    </body> 
</html>

出典

2016-05-02 Alan

をあなたは 'カウンタを（呼び出す必要があります）;' '後 – Satpal

はい、 'counter（）;' ... '$（ '。remove-item'）をクリックしてください（function {）{ $（" }）; – Rayon

あなたは[動的にJQueryを使ってフィールドを挿入/削除する]（http://stackoverflow.com/questions/36935534/dynamically）のようなものを探していますか？ -insert-remove -fields-using-jquery/36935834＃36935834） –

要素が削除された後にcounter();メソッドを呼び出す必要があります。

//remove last item 
$('.remove-item').click(function() { 
    $(".delete:last").remove(); 

    counter(); 
});

出典

2016-05-02 08:09:15 Satpal

これは、要素を削除した後でカウンタ関数を呼び出していないためです。総計算する前に、テキストを取得中

$('.remove-item').click(function(){ 
     $(".delete:last").remove(); 
     counter(); 
});

また、値を解析する必要があります：あなたはハンドラをクリックした削除項目でそれを呼び出す必要が

 var total = 0; 

     $(".skill").each(function() { 

      total += + parseInt($(this).text() , 10); 
     }); 

     $('.total').text('Total: ' + total);

出典

2016-05-02 08:09:19

最後のアイテムを削除jquery

答えて

関連する問題