JQuery сложение / вычитание из динамически добавляемого входного текста

У меня есть такой сценарий: у меня есть ввод текста в форме и использовать их, чтобы сделать некоторые вычисления (в основном сложение и вычитание). Текстовые входы (промежуточные итоги) могут быть добавлены / удалены через jQuery с помощью щелчка мышью. До сих пор я был в состоянии получить сумму (сумму) входных элементов, когда я добавил их в форму и поместил в них некоторые значения. То, что мне не хватает сейчас, это способ обновления общей суммы всякий раз, когда я удаляю один текстовый ввод. Вот код, у меня также есть http://jsfiddle.net/uomopalese/1w54rhyv/. Спасибо за помощь.

КОД: (обновлено решением, предложенным iovis

<div id="dati-dettaglio-linee">
  <div id="righe">
    <div class="linea"><!-- ripetizione linea -->
    <h5>Nr. linea: <span>1</span></h5>
    <ul>
     <li>Sub total: <span><input class="somma" type="text" value="" name="ValoreTotale" /></span></li>
    </ul>
  </div><!-- ripetizione linea -->
</div><!-- righe -->
<div class="link-button"><a href="javascript:;" id="addButton">ADD LINE</a></div>
<div class="link-button"><a href="javascript:;" id="removeButton">REMOVE LINE</a></div>
<div class="clear"></div>
<div id="riepilogo-aliquote-nature">
  <ul>
    <li>Total: <span class="totale"><input type="text" value="" id="ImponibileImporto" /></span></li>
  </ul>
</div>
</div><!-- dettaglio-linee -->


/////////////////////////////////// ADD LINES 
$(document).ready(function(){ 
  var counter = 2;
    $("#addButton").click(function () {
    //alert('Stai per aggiungere una linea di contenuto alla fattura');
    $("#righe").append('<div id="linea' + counter + '"><h5>Nr. linea: <span>' + counter + '</span></h5>' + '\n\r' +
      '<ul>' +'\n\r' +  
      '<li>Sub total: <span><input class="somma" type="text" value="" id="ValoreTotale' + counter + '" /></span></li>' + '\n\r' + 
      '</ul></div>');
counter++;;
$(".somma").each(function() {
        $(this).keyup(function(){
            calculateSum();
        });
    });
  });
  $("#removeButton").click(function () {
 //alert('Stai per rimuovere una linea di contenuto alla fattura');
 if(counter==2){
      alert("Non ci sono altre linee da eliminare");
      return false;
   }   
 counter--;
  $("#linea" + counter).remove();
   calculateSum();
  });
 });
/////////////////////////////////////////


///////////////////////////////////FUNCTION ADD VELUES
$(document).ready(function(){           
  $(".somma").each(function() {
        $(this).keyup(function(){
            calculateSum();
        });
    });
 });
function calculateSum() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".somma").each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    //$("#sum").html(sum.toFixed(2));
    $('.totale input').val(sum.toFixed(2));
}
Источник

3 ответа

Решение

Может быть, я что-то упустил, но, похоже, вам просто нужно вызвать функцию Calculate () для события удаления...

    $("#removeButton").click(function() {
      if (counter == 2) {
        alert("Non ci sono altre linee da eliminare");
        return false;
      }

      counter--;
      $("#linea" + counter).remove();
      calculateSum(); // <-- Add this
    });
Источник

Попробуйте ниже:

$.when($("#linea" + counter).remove()).then(function(){
    calculateSum();
});

скрипка

Источник

Вы перепутали с атрибутиками name а также id,

вы получаете доступ к полям ввода, используя names это не сработает. мы можем получить к ним доступ, используя class имя или id,

Я модифицировал скрипку. проверить это

Источник
Другие вопросы по тегам