CODEWITHSUNDEEP
javascriptjquery
can özgülnes
can özgülnes

Reputation: 3

How can i clear and delete input data with jquery?

I'm trying to make an app that automatically aggregates numbers and added input dynamically. When I delete any input field, the number is not subtracted from the sum. How do I subtract the number from the entry I deleted?Thanks for your help.

var sayac = 1;
$(function() {
  $('#ekle').click(function() {
    sayac += 1;
    $('#ekhizmetler tbody').append(
      '<tr><th><strong></strong></th><td><input id="alan_" name="alanlar2[]' + '" type="text" class="form-control inst_amount" /></td><td><a href="#"class="delete btn btn-danger">Delete</a></td></tr>');
  });

  $('#ekhizmetler').on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).closest("tr").remove();

  })
});
function sumIt() {
  var total = 0,
    val;
  $('.inst_amount').each(function() {
    val = $(this).val();
    val = isNaN(val) || $.trim(val) === "" ? 0 : parseFloat(val);
    total += val;
  });
  $('#total_price').html(Math.round(total));
  $('#total_amount').val(Math.round(total));
}

$(function() {
  $("#add").on("click", function() {
    $("#container input").last()
      .before($("<input />").prop("class", "inst_amount").val(0))
      .before("<br/>");
    sumIt();
  });

  $(document).on('input', '.inst_amount', sumIt);
  sumIt() // run when loading
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12">
  <table id="ekhizmetler" class="table table-condensed">
    <thead>
      <tr>
        <th>Sıra</th>
        <th>Numbers</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th><strong>1</strong></th>
        <td><input id="alan_2" name="alanlar2[]" type="text" class="form-control inst_amount"></td>
        <td><input id="total_amount" name="total_amount" type="text" class="form-control" value="0"></td>
        <td><a href="#" class="delete btn btn-danger">Delete</a></td>
      </tr>
    </tbody>
    <tfoot>
      <td>
        <p id="ekle"><a href="#ekle" class="btn btn-primary">&raquo; New Field </a></p>
      </td>
    </tfoot>
  </table>
</div>

Upvotes: 0

Views: 51

Answers (1)

Mamun
Mamun

Reputation: 68933

Simply call sumIt() after deleting the input row which will recalculate the sum based on only the currently existing inputs in the DOM:

$('#ekhizmetler').on("click", ".delete", function(e) {
  e.preventDefault();
  $(this).closest("tr").remove();
  sumIt(); // run after deletion
});


var sayac = 1;
$(function() {
  $('#ekle').click(function() {
    sayac += 1;
    $('#ekhizmetler tbody').append(
      '<tr><th><strong></strong></th><td><input id="alan_" name="alanlar2[]' + '" type="text" class="form-control inst_amount" /></td><td><a href="#"class="delete btn btn-danger">Delete</a></td></tr>');
  });

  $('#ekhizmetler').on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).closest("tr").remove();
    sumIt(); // run when loading
  })
});
function sumIt() {
  var total = 0,
    val;
  $('.inst_amount').each(function() {
    val = $(this).val();
    val = isNaN(val) || $.trim(val) === "" ? 0 : parseFloat(val);
    total += val;
  });
  $('#total_price').html(Math.round(total));
  $('#total_amount').val(Math.round(total));
}

$(function() {
  $("#add").on("click", function() {
    $("#container input").last()
      .before($("<input />").prop("class", "inst_amount").val(0))
      .before("<br/>");
    sumIt();
  });

  $(document).on('input', '.inst_amount', sumIt);
  sumIt() // run when loading
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12">
  <table id="ekhizmetler" class="table table-condensed">
    <thead>
      <tr>
        <th>Sıra</th>
        <th>Numbers</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th><strong>1</strong></th>
        <td><input id="alan_2" name="alanlar2[]" type="text" class="form-control inst_amount"></td>
        <td><input id="total_amount" name="total_amount" type="text" class="form-control" value="0"></td>
        <td><a href="#" class="delete btn btn-danger">Delete</a></td>
      </tr>
    </tbody>
    <tfoot>
      <td>
        <p id="ekle"><a href="#ekle" class="btn btn-primary">&raquo; New Field </a></p>
      </td>
    </tfoot>
  </table>
</div>

Upvotes: 1

Related Questions