3

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.

0

2 Respostas 2

7

Você está a usar IDs duplicadas. O problema é provavelmente com a ID linkRemover.
IDs têm de ser únicas, então deve usar classes em vez de IDs.

Sugestão:

Mudar no html a ser inserido de :

<a href="#" id="linkRemover">

para

<a href="#" class="linkRemover">

E no jQuery/JavaScript de:

    $('#linkRemover').live('click', function() { 

para

    $('.linkRemover').live('click', function() { 

O seu segundo problema é que tem um seletor para elementoes que ainda não existem, vai ter de delegar o evento.

Use assim:

$('#formulario').on('click', '.linkRemover', function() {  // para versão acima do 1.7
$('#formulario').delegate('click', '.linkRemover', function() {  // para versão acima do 1.4

Exemplo: http://jsfiddle.net/8k4ooet2/

0
6

Modifiquei um pouco sua implementação para setar o evento de remover a div assim que a linha é criada.

$(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() {
        //criando instancia dom .conte4udoIndividual
        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);

        //recuperando instancia #linkRemover e adicionando evento 
        linha.find("a").on("click", function() {
            $(this).parent(".conteudoIndividual").remove();
        });
    });
});

Exemplo no jsfiddle

3
  • @Sergio Bom, isso eu já mudei pra classe. Bom, mas entendo, escolher isso como resposta e ter uma coisa errada assim. 3/10/2014 às 13:30
  • @TuyoshiVinicius também agradeço pela ajuda :). 3/10/2014 às 13:49
  • +1 assim tem outra versão de como resolver o problema.
    – Sergio
    3/10/2014 às 14:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .