I built this bootstrap-based fiddle
http://jsfiddle.net/gildonei/ougkLo46/
HTML
<form id="form-teste">
<div class="row clone">
<div class="col-xs-12 col-sm-12 col-lg-5 col-md-5">
<label for="PessoaEmail0EmailTipoId">Tipo de E-mail</label>
<select name="data[PessoaEmail][0][email_tipo_id]" required="required" id="PessoaEmail0EmailTipoId" class="form-control">
<option value="">Tipo de email</option>
<option value="1">Pessoal</option>
<option value="2" selected="selected">Profissional</option>
</select>
</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> </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"> </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>
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");
}
});
}
Welcome to Stackoverflow site. Post your code using code formatting, so it is more readable.
– durtto
Is your code posted complete? Check so we can help.
– durtto
If you posted a code it would help us understand the doubt. I understood that there are two inputs. But it was not clear to me what the "+" would do.
– Paulo
It’s an icon to add another friend
– Michelly Sabatiny
When someone clicked on the "+" again the same fields appear below...
– Michelly Sabatiny
You want to add fields dynamically ?
– Edilson
Exactly that
– Michelly Sabatiny