Preciso que o usuário posso adicionar os mesmos campos quantas vezes ele quiser, e também retirá-los. Consegui fazer o script para adicionar os campos, mas remover não está funcionando.
HTML
<a href="#" data-id="1" id="adicionarCampo">+ adicionar campo</a>
<form method="POST" action="gerarpdf.php" target="_blank">
<div id="formulario">
<input type="text" placeholder="Nº do Documento" maxlength="6" name="numeroDocumento" required/>
<select name="tipoDocumento" required>
<option value="" disabled selected>Tipo do Documento</option>
<option value="01">Volvo</option>
<option value="02">Saab</option>
</select>
<select name="subTipoDocumento" required>
<option value="" disabled selected>Subtipo do Documento</option>
<option value="01">Volvo</option>
<option value="02">Saab</option>
</select>
</div>
<input type="submit" value="Gerar Código"/>
</form>
Javascript
$(function() {
var divContent = $('#formulario');
var botaoAdicionar = $('a[data-id="1"]');
var i = 1;
//Ao clicar em adicionar ele cria uma linha com novos campos
$(botaoAdicionar).click(function() {
$('<div class="conteudoIndividual"><input type="text" placeholder="Nº do Documento" maxlength="6" name="numeroDocumento'+i+'" required/><select name="tipoDocumento'+i+'" required><option value="" disabled selected>Tipo do Documento</option><option value="01">Volvo</option><option value="02">Saab</option></select><select name="subTipoDocumento'+i+'" required><option value="" disabled selected>Subtipo do Documento</option><option value="01">Volvo</option><option value="02">Saab</option></select><a href="#" id="linkRemover">- Remover Campos</a></div>').appendTo(divContent);
$('#removehidden').remove();
i++;
$('<input type="hidden" name="quantidadeCampos" value="'+i+'" id="removehidden">').appendTo(divContent);
});
//Cliquando em remover a linha é eliminada
$('#linkRemover').live('click', function() {
$(this).parents('.conteudoIndividual').remove();
i--;
});
});
O que ele faz
Quando clico no botão de adicionar
ele cria todos os 3 campos dentro de uma div .conteudoIndividual
, criei um campo hidden
para controlar essa quantidade de linhas.