2

Estou precisando inserir uns campos dinamicamente e achei uma vídeo aula que mostrava como fazer. Porém, após fazer tudo certinho, meu código não remove os que acabei de inserir.

Onde está o erro?

Aqui está o código:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/addcampo.js"></script>

<form class="form-horizontal">
    <fieldset>
    <!-- Form Name -->
    <legend>Professores > Novo Professor</legend>

    <!-- Text input-->
    <div class="form-group">
        <label class="col-md-4 control-label" for="Professores">Nome</label>  
        <div class="col-md-6">
            <input id="Professores" name="Professores" type="text" placeholder="Professor" class="form-control input-md">
        </div>
    </div>

    <!-- Select Basic -->
    <div class="form-group">
    <label class="col-md-4 control-label" for="Dia">Dia disponível</label>
        <div class="col-md-4">
            <select id="Dia" name="Dia" class="form-control">
            <option value="Segunda">Segunda-Feira</option>
            <option value="Terça">Terça-Feira</option>
            <option value="Quarta">Quarta-Feira</option>
            <option value="Quinta">Quinta-Feira</option>
            <option value="Sexta">Sexta-Feria</option>
            <option value="Sabado">Sábado</option>
            </select>
        </div>
        <div class="col-md-1">
            <a href="#" id="add" class="btn btn-primary" role="button">Adicionar Dia</a>
        </div>
    </div>

    <!-- Multiple Checkboxes (inline) -->
    <div class="form-group">
        <label class="col-md-4 control-label" for="Turno">Turno</label>
        <div class="col-md-4">
            <label class="checkbox-inline" for="Turno-0"><input type="checkbox" name="Turno" id="Turno-0" value="Manha">Manhã</label>
            <label class="checkbox-inline" for="Turno-1"><input type="checkbox" name="Turno" id="Turno-1" value="Tarde">Tarde</label>
            <label class="checkbox-inline" for="Turno-2"><input type="checkbox" name="Turno" id="Turno-2" value="Noite">Noite</label>
        </div>
    </div>

    <div id="campos"></div>

    <!-- Button (Double) -->
    <div class="form-group">
        <label class="col-md-4 control-label" for="Salvar"></label>
        <div class="col-md-8">
            <button id="Salvar" name="Salvar" class="btn btn-success">Salvar</button>
            <button id="Cancelar" name="Cancelar" class="btn btn-danger">Cancelar</button>
        </div>
    </div>

    </fieldset>
</form>
$(function(){
    $("#add").click(function(){
        var input =  '<div class="dias">'
            input += '<div class="form-group">'
            input +=             '<label class="col-md-4 control-label" for="Dia">Dia disponível</label>'
            input +=                '<div class="col-md-4">'
            input +=                    '<select id="Dia" name="Dia" class="form-control">'
            input +=                    '<option value="Segunda">Segunda-Feira</option>'
            input +=                    '<option value="Terça">Terça-Feira</option>'
            input +=                    '<option value="Quarta">Quarta-Feira</option>'
            input +=                    '<option value="Quinta">Quinta-Feira</option>'
            input +=                    '<option value="Sexta">Sexta-Feria</option>'
            input +=                    '<option value="Sabado">Sábado</option>'
            input +=                    '</select>'
            input +=                '</div>'



            input +=        '</div>'

            input +=         '<!-- Multiple Checkboxes (inline) -->'
            input +=         '<div class="form-group">'
            input +=            '<label class="col-md-4 control-label" for="Turno">Turno</label>'
            input +=                '<div class="col-md-4">'
            input +=                    '<label class="checkbox-inline" for="Turno-0"><input type="checkbox" name="Turno" id="Turno-0" value="Manha">Manhã</label>'
            input +=                    '<label class="checkbox-inline" for="Turno-1"><input type="checkbox" name="Turno" id="Turno-1" value="Tarde">Tarde</label>'
            input +=                    '<label class="checkbox-inline" for="Turno-2"><input type="checkbox" name="Turno" id="Turno-2" value="Noite">Noite</label>'
            input +=                '</div>'
            input +=        '</div>'
            input +=                '<a href="#" id="deletar" class="teste" role="button">Adicionar Dia</a>'
            input +='</div>';

        $("#campos").append(input);
        return false;
    });

    $('.teste').live('click', function(){
        $(this).parent('dias').remove();
    });
});

2 Respostas 2

4

Eu sugiro simplificar o seu JavaScript e evitar ter HTML dentro do JavaScript.

Uma vez que a maior parte do código que quer inserir já existe igual na página pode copiar em vez de escrever HTML no meio do JavaScript.

Sugestão:

$(function () {
    $("#add").click(function () {
        var formGroup = $('#Dia').closest('.form-group').clone(); // criar uma cópia do outro select
        formGroup.find('select').prop('id', ''); // retirar a ID (ou dar um index) porque IDs têm de ser únicas
        formGroup.find('#add').prop('id', '').addClass('teste').html('Remover dia'); // mudar o link de adicionar para remover

        $("#campos").append(formGroup);
        return false;
    });

    $('#campos').on('click', '.teste', function () { // usando delegação do evento e o .on()
        $(this).closest('.form-group').remove();
    });
});

Demo


Explicação do código:

$(function () {

Esta primeira linha é para o código correr somente quando a página tiver carregado, para evitar que o código corra antes de o HTML existir (o que daria erro). Outra função/vantagem é criar uma closure para não poluir o espaço global com variáveis defenidas aqui.

    $("#add").click(function () {

Amarrar ao elemento que tem o ID #add uma função que corre quando o elemento receber um clic

        var formGroup = $('#Dia').closest('.form-group').clone(); // criar uma cópia do outro select

Como comentei no código, isto cria uma cópia/clone do seu select que já existe na página. O selector começa no #Dia, procura o elemento com classe .form-group mais próximo (procurando nos antecessores/pais do #Dia) e quando encontrar esse .form-group faz uma cópia dele

        formGroup.find('select').prop('id', ''); // retirar a ID (ou dar um index) porque IDs têm de ser únicas

Dentro desse novo clone, procurar o #Dia e mudar (ou no caso do meu exemplo retirar) o ID. Isto porque ID's têm de ser únicos e porque não quero colocá-lo na página com ID duplicado.

        formGroup.find('#add').prop('id', '').addClass('teste').html('Remover dia'); // mudar o link de adicionar para remover

Aqui faço o mesmo para o botão #add, também para evitar ID duplicada, e de seguida, adiciono a classe teste e mudo-lhe o texto/html para "Remover dia" em vez de "Adicionar dia" que era o que tinha sido copiado. Isto tudo com essa cópia na memória, antes de colocar na página.

        $("#campos").append(formGroup);

Adicionar este novo select, clone do existente, na página.

        return false;

Dar return false para impedir que ele siga o link criado pelo <a> e não carregar a página apagando tudo.

    });

    $('#campos').on('click', '.teste', function () { // usando delegação do evento e o .on()

Aqui acrescento delegação de eventos. Estou a usar o .on() para delegar o evento mas pode usar o .live() se estiver a usar uma versão antiga do jQuery. Porem o que de facto faltava nessa linha era delegar o evento. Uma vez que ainda não existia um elemento com classe .teste quando o .live() foi lido, o código não sabe que ele existe. Assim se o código estiver a "ouvir" eventos no #campos, quando o click surgir ele vai procurar o selector que está no 2o parametro da função: .teste e aí já o encontra. Pode ler mais sobre isto nesta minha resposta aqui: https://pt.stackoverflow.com/a/5199/129 .

        $(this).closest('.form-group').remove();

Quando o elemento em cima receber o clic, procura o parente mais próximo com a classe .form-group e remove-o da página.

    });
});
2
  • 1
    Cara! Esse seu código ficou show de bola, funcionou perfeitamente e simplificou bastante, porém não entendo direito, na verdade essa parte de javascript eu não sei nada, então acho q só vou conseguir usar assim quando estiver mais aprofundado no assunto... Mas obrigado!!
    – Alceu
    Commented 16/04/2014 às 0:37
  • 2
    @Alceu, a minha resposta é melhor por duas razões. Primeira porque não mistura HTML dentro do Javascript. Segundo porque é menos customizada, menos díficil de manter. Juntei uma explicação bem detalhada para compreender melhor o código.
    – Sergio
    Commented 16/04/2014 às 4:47
2

Existem alguns problemas em seu código:

  1. O método .live do jQuery foi descontinuado na versão 1.7 da biblioteca e não deve ser mais utilizado, como mostrado na documentação. Em seu lugar você pode utilizar o on(), que foi adicionado na versão 1.7 do jQuery.
  2. O seu seletor no parent até é bem intencionado, mas há um erro primário e corriqueiro até entre desenvolvedores experientes: você esqueceu de pôr o . no seletor de class:

    // Você esqueceu do ".", para indicar que se trata de uma class       
    $(this).parent('.dias').remove();
    

Fazendo essas alterações é para seu código funcionar perfeitamente. Postei um exemplo aqui para que veja em funcionamento.

1
  • Show de bola, funcionou, os erros eram estes mesmo!! Já estou conseguindo inserir e remover agora!! Obrigado!
    – Alceu
    Commented 16/04/2014 às 0:34

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 .