Clone Rows

Clonagem de linhas em forms

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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">
<form id="form-teste">
  <div class="row clone">
    <div class="col-xs-12 col-sm-12 col-lg-5 col-md-5">
      <input for="PessoaEmail0EmailTipoId"></input>

    </div>
    <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
		<label for="PessoaEmail0DsEmail">Endereço de E-mail</label>
        <input name="data[PessoaEmail][0][ds_email]" placeholder="Email" maxlength="255" required="required" class="email valid form-control" type="email" id="PessoaEmail0DsEmail"><i></i>
    </div>
    <div class="col-xs-12 col-sm-12 col-lg-1 col-md-1">
	<label>&nbsp;</label>
      <button type="button" title="remover" class="btn button-remove btn-danger col-md-12">
        <i class="fa fa-remove"></i>
      </button>
    </div>
  </div>
  <div class="row">&nbsp;</div>
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
      <button type="button" class="btn button-more btn-success pull-right">
        <i class="fa fa-plus-circle"></i> Mais
      </button>
    </div>
  </div>
</form>

CSS

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

JavaScript

var nrQtdProduto = 0;
$(function() {

  $('.button-more').click(function() {
    var $objDivProduto = $(this).parent().parent().parent().children('.clone');
    nrQtdProduto = $(this).parent().parent().parent().children('.row').length - 1;

    $objDivProduto
      .clone()
      .removeClass('clone')
      .find('input:text, input.email').each(function(k, v) {
        var strName = $(v).attr('name');
        var strId = $(v).attr('id');

        $(this)
          .attr('name', strName.replace(0, nrQtdProduto))
          .attr('id', strId.replace(0, nrQtdProduto));

        if ($(this).attr('type') != 'hidden') {
          $(this).val('');
        }

      })
      .end()
      .insertAfter($objDivProduto);

    removeElement();
  });

});

function removeElement() {
  // -------------------------------------------------------
  // INICIO DO CÓDIGO DE REMOVER NOVO TELEFONE, EMAIL ...
  // -------------------------------------------------------
  $('.button-remove').click(function() {

    nrQtdProduto = $(this).parent().parent().parent().children('.row').length - 1;

    if (nrQtdProduto == 1) {
      showAlert('Erro', 'Você deve ter ao menos um campo para cadastro.');

      return;
    }

    if (confirm('Deseja realmente remover a linha ?')) {
      var objRemove = $(this).parent().parent();
      objRemove.hide("slow");
    }
  });
}