2

Tenho o seguinte formulário:

<div class="col-md-12 form-group">
    <div class="row" id="dep">
        <div class="col-md-10">
            <input type="text" class="form-control" placeholder="Nome do Dependente" id="dependente[]" name="dependente[]">
        </div>
        <div class="col-md-2">
            <button class="btn btn-primary" type="button" id="adicionar_dependente"><span class="fa fa-plus"></span></button>
        </div>
    </div>
</div>

E tenho o seguinte jQuery:

$("#adicionar_dependente").click(function(){
    var campos_novos = "<div class='col-md-10' id='dep_fc' style='margin-top: 5px;'><input type='text' class='form-control' placeholder='Nome do Dependente' id='dependente[]' name='dependente[]'></div><div class='col-md-2' id='dep_fc' style='margin-top: 5px;'><button class='btn btn-primary' type='button' id='deletar_dependente'><span class='fa fa-minus'></span></button></div>";
    $("#dep").append(campos_novos);
});

$("#deletar_dependente").click(function(){
    $(this).closest('#dep_fc').remove();
});

Para adicionar, adiciona normalmente as linhas dentro da div, mas para remover, não funciona. Alguém pode me dizer onde estou errando?

7
  • IDs devem ser únicos no código, prefira class nesses casos. Consegue jogar algo funcional no CODEPEN? Seria melhor pra gente testar.
    – Largato
    Commented 22/12/2016 às 11:59
  • Quando eu add, o nome do id é dep_fc e quando eu removo tambem... Commented 22/12/2016 às 12:01
  • Tente com class pra ver se muda algo. Se conseguir colocar um demo no codepen.io fica fácil de testarmos.
    – Largato
    Commented 22/12/2016 às 12:02
  • codepen.io/anon/pen/KNYvxY Commented 22/12/2016 às 12:04
  • 1
    vc ta com 2 dep_fc na mesma linha ao inserir, tem mais essa. Provavelmente o mais prático mesmo seria por um onclick dentro da linha, em vez de usar o seletor do jQuery, ou ao acrescentar o controle novo, ir incrementando um numero no ID. ai já resolve o funcionamento e o problema dos IDs repetidos.
    – Largato
    Commented 22/12/2016 às 12:17

1 Resposta 1

3

Eu vi dois problemas em seu código.

  1. Precisa de uma DIV para envolver seu campo de texto e seu botão, essa DIV será o Parent e precisa ter uma class e não um id. O id não pode repetir na página. Então, como pode ter vários dependentes, então tem que ser class.

  2. Objetos criados dinamicamente não irá funcionar a função do onClick que você define para o botão. É preciso delegar essa função para o document, e o document passa para o botão que será criado.

$("#adicionar_dependente").click(function() {
  var campos_novos = "<div class='dep_fc'><div class='col-md-10' style='margin-top: 5px;'><input type='text' class='form-control' placeholder='Nome do Dependente' id='dependente[]' name='dependente[]'></div><div class='col-md-2' id='dep_fc' style='margin-top: 5px;'><button class='btn btn-primary remove' type='button' >Remove</button></div></div>";
  $("#dep").append(campos_novos);
});

$(document).on('click', 'button.remove', function() {
  $(this).closest('div.dep_fc').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 form-group">
  <div class="row" id="dep">
    <div class="col-md-10">
      <input type="text" class="form-control" placeholder="Nome do Dependente" id="dependente[]" name="dependente[]">
    </div>
    <div class="col-md-2">
      <button class="btn btn-primary" type="button" id="adicionar_dependente">ADD</button>
    </div>
  </div>
</div>

1
  • Perfeito, é isso, ajustei aqui no meu e deu certinho... E entendi a questão. Muito obrigado! Commented 22/12/2016 às 12:12

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 .