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?
class
nesses casos. Consegue jogar algo funcional no CODEPEN? Seria melhor pra gente testar.class
pra ver se muda algo. Se conseguir colocar um demo no codepen.io fica fácil de testarmos.