Add / Remove Row From Invoice Page

Hello all I am a jquery noob, I am making a invoice page and got the add a new line to the invoice to work however when I click the remove button it will remove the first line item

Solution 1:

Use a common parameter like class or data-attrbiutes wherever possible. Common Ids are invalid.

Check this code,

$('#add').click(function () {
    var n = $('.row').length + 1;
    var temp = $('.row:first').clone();

    temp.attr('id', temp.attr('id') + n);       //avoiding duplicate ID

    $('input:first', temp).attr('placeholder', 'Item #' + n)
    $('.row:last').after(temp);
});

$(document).ready(function () {
    $("#remove").click(function () {
        $(".row:last").remove();               //Remove section.
    });
});

Demo

Solution 2:

If you can use my sample

see my Code sample

var editableProducts = {

  options: {
    table: "#tableSocProducts"
  },
  initialize: function() {
    this
      .setVars()
      .events();
  },
  setVars: function() {
    this.$table = $(this.options.table);
    this.$totalLines = $(this.options.table).find('tr').length - 1;
    return this;
  },
  updateLines: function() {
    var totalLines = $(this.options.table).find('tr').length - 1;
    if (totalLines <= 1) {
      $('.remove').hide();
      $('.add').show();
    }

    return this;
  },
  events: function() {
    var _self = this;

    _self.updateLines();

    this.$table
      .on('click', 'button.add', function(e) {
        e.preventDefault();
        //---------------------------------------

        var $tr = $(this).closest('tr');
        var $clone = $tr.clone();
        $clone.find(':text').val('');
        $tr.after($clone);

        if (_self.setVars().$totalLines > 1) {
          $('.remove').show();
        }

        $tr.find('.add').hide();

      })
      .on('click', 'button.remove', function(e) {
        e.preventDefault();
        //---------------------------------------

        var $tr = $(this).closest('tr')
        $tr.remove();

        if (_self.setVars().$totalLines <= 1) {
          $('.remove').hide();
          $('.add').show();
        }
        //if have delete last button with button add visible, add another button to last tr
        if (_self.setVars().$totalLines > 1) {
          _self.$table.find('tr:last').find('.add').show();
        }

      });

    return this;
  }
};

$(function() {
  editableProducts.initialize();
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
  <table class="table" id="tableSocProducts">
    <thead>
      <tr>
        <td class="text-weight-semibold">Descrição</td>
        <td class="text-weight-semibold">Qtd</td>
        <td class="text-weight-semibold">Preço Unitário</td>
        <td class="text-weight-semibold">Valor Total</td>
        <td class="text-weight-semibold">#</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="text" value="" />
        </td>
        <td>
          <input type="text" value="" />
        </td>
        <td>
          <input type="text" value="" />
        </td>
        <td>
          <input type="text" value="" />
        </td>
        <td>
          <input type="text" value="" />
        </td>
        <td>
          <div class="">
            <button id="addNewItem" name="addNewItem" type="button" class="btn btn-success add"><i style="color:#fff" class="fa fa-plus-circle"></i></button>
            <button id="removeItem" name="removeItem" type="button" class="btn btn-danger remove"><i style="color:#fff;" class="fa fa-trash-o"></i></button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>