Add and remove jQuery inputs

Question

Add and remove jQuery inputs

Asked 7 years, 11 months ago

Viewed 2,289 times

2

I have the following form:

<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>

And I got the following 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();
});

To add, it usually adds the lines inside the div, but to remove, it doesn’t work. Can anyone tell me where I’m missing?

Ids must be unique in the code, prefer class in these cases. Can you play something functional in CODEPEN? It would be better for us to test.

– Bacco

2016/12/22 at 11:59
When I add, the id name is dep_fc and when I remove too...

– Sr. André Baill

2016/12/22 at 12:01
Try with class to see if anything changes. If you can put a demo on http://codepen.io it’s easy to test.

– Bacco

2016/12/22 at 12:02
http://codepen.io/anon/pen/KNYvxY

– Sr. André Baill

2016/12/22 at 12:04
Ah, there’s one more problem, when you add a new #deletar_dependent, I don’t think jQuery will "hold" to the new control.

– Bacco

2016/12/22 at 12:04
Exactly, it’s not worth it, because I click and it doesn’t delete... But I posted the code there

– Sr. André Baill

2016/12/22 at 12:05
1

vc ta with 2 dep_fc in the same row when inserting, has more this. Probably the most practical thing would be to put an onclick inside the line, instead of using the jQuery selector, or by adding the new control, increasing a number in the ID. ai already solves the operation and the problem of repeated Ids.

– Bacco

2016/12/22 at 12:17

Show 2 more comments

1 answer

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.

by Diego Souza • **16,524** points · Answer 1 · 2016-12-22T12:09:05+00:00

I saw two problems in your code.

Needs a DIV to involve your text field and your button, this DIV will be Parent and needs to have a class and not a id. The id cannot repeat on the page. So, as it can have several dependents, then it has to be class.
Dynamically created objects will not work onClick that you set to the button. You need to delegate this function to the document, and the document switches to the button that will be created.

$("#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>