add, remove items in jquery

by Rodrigo Allves

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.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>

JavaScript

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();
});