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;
    returnthis;
  },
  updateLines: function() {
    var totalLines = $(this.options.table).find('tr').length - 1;
    if (totalLines <= 1) {
      $('.remove').hide();
      $('.add').show();
    }

    returnthis;
  },
  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 trif (_self.setVars().$totalLines > 1) {
          _self.$table.find('tr:last').find('.add').show();
        }

      });

    returnthis;
  }
};

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

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