Add - Del Campos 2

Adicionar e remover campos exemplo 2 js

by Rapha Souza

HTML

<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"/>
        <a data-id='1' href="#">Adicionar</a>
</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() {
                var linha = $('<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);
            linha.find("a").on("click", function(){
                $(this).parent(".conteudoIndividual").remove();
            });
        });
});