1

I want to remove the first div and everything else inside. Here in the code snippet I can delete the first input, but I cant delete the others if I add more.

On my page I can't delete any input.

$(document).ready(function() {
    var max_fields      = 4; //maximum input boxes allowed
    //var wrapper         = $(".phone-field"); //Fields wrapper
    var add_button      = $("#add_field_button"); //Add button ID
    
    var x = 1; //initlal text box count
    $(add_button).click(function(){ //on add input button click
        if(x < max_fields){ //max input box allowed
            $(add_button).
            x++; //text box increment
            $('.phone-field').append('<div class="col-xs-12 col-md-7 phone-class"><label for="telefones">Telefone</label><div class="input-group"><input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone"><span class="input-group-btn"><button class="btn btn-default" id="remove_field" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></span></div></div>'); //add input box
        }
    });

      $("#remove_field").click(function(){ //user click on remove text
        //e.preventDefault();
        //$('#remove_field').closest('div.phone-class').remove();
        $('#remove_field').parent().parent().parent().remove();
      });    
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://use.fontawesome.com/1cdb0cfd25.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group phone-field">
<div class="col-xs-12 col-md-7">
  <label for="telefones">Telefone</label>
  <div class="input-group">
    <input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone">
    <span class="input-group-btn">
      <button class="btn btn-default" id="add_field_button" type="button"><i class="fa fa-plus" aria-hidden="true"></i></button>
    </span>
  </div>
</div>


<div class="col-xs-12 col-md-7 phone-class"> <!-- I want to delete this DIV here if i click on the button with id="remove_field"-->
 <label for="telefones">Telefone</label>
 <div class="input-group">
  <input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone">
  <span class="input-group-btn"><button class="btn btn-default" id="remove_field" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></span>
 </div>
</div>
</div>
max
  • 96,212
  • 14
  • 104
  • 165
Ramon Carvalho
  • 112
  • 1
  • 2
  • 11
  • 2
    Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) Moreover, the `id` attribute **must** be unique. Having more than one `#remove_field` element makes your HTML invalid. – Artur Filipiak Sep 27 '16 at 01:32
  • 2
    Try using `class='remove_field'` in delete icon instead of `id` and in script use `$(this).parent().parent().parent().remove();` – Vijai Sep 27 '16 at 01:39
  • Do you mean in delete – Ramon Carvalho Sep 27 '16 at 01:52

2 Answers2

2

That happens because the new elements with id remove_field didn't existed by the time your ready function ran. This way the only elements bonded to the function that removes the field is the one that already is on the DOM element.

Luckily for you that's a pretty common mistake and a fair simple one to solve also. You just need to bind an permanent parent element using jQuery's .on function:

$(document).ready(function() {
    var max_fields      = 4; //maximum input boxes allowed
    //var wrapper         = $(".phone-field"); //Fields wrapper
    var add_button      = $("#add_field_button"); //Add button ID
    
    var x = 1; //initlal text box count
    $(add_button).click(function(){ //on add input button click
        if(x < max_fields){ //max input box allowed
            $(add_button).
            x++; //text box increment
            $('.phone-field').append('<div class="col-xs-12 col-md-7 phone-class"><label for="telefones">Telefone</label><div class="input-group"><input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone"><span class="input-group-btn"><button class="btn btn-default" id="remove_field" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></span></div></div>'); //add input box
        }
    });

      $(".phone-field").on('click','#remove_field',function(){ //user click on remove text
        //e.preventDefault();
        //$('#remove_field').closest('div.phone-class').remove();
        $('#remove_field').parent().parent().parent().remove();
      });    
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://use.fontawesome.com/1cdb0cfd25.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group phone-field">
<div class="col-xs-12 col-md-7">
  <label for="telefones">Telefone</label>
  <div class="input-group">
    <input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone">
    <span class="input-group-btn">
      <button class="btn btn-default" id="add_field_button" type="button"><i class="fa fa-plus" aria-hidden="true"></i></button>
    </span>
  </div>
</div>


<div class="col-xs-12 col-md-7 phone-class"> <!-- I want to delete this DIV here if i click on the button with id="remove_field"-->
 <label for="telefones">Telefone</label>
 <div class="input-group">
  <input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone">
  <span class="input-group-btn"><button class="btn btn-default" id="remove_field" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></span>
 </div>
</div>
</div>
emiliopedrollo
  • 910
  • 6
  • 21
  • Worked like a charm, I gonna take a look on the on() function thanks soo much @emiliopedrollo – Ramon Carvalho Sep 27 '16 at 03:01
  • I hope you have understanded also why wasn't it working and the differences that this patch really did. – emiliopedrollo Sep 27 '16 at 03:03
  • Now I understood emiliopedrollo. Thanks so much. I can change the id="remove_field" to correct my HTML like @Artur Filipiak and Marcelo Olgiati said, and of course, change the code you wrote. – Ramon Carvalho Sep 27 '16 at 22:20
0

1) When you are inside a listener use "this" to refer to the object

2) Use closest instead of parent().parent().parent() or your function will be useless if HTML changes:

3) Make "remove_field" a class, as you have multiple elements with the same id, and as previous comment stated that is not valid HTML

$(this).closest('div.phone-class').remove();

Marcelo Olgiati
  • 81
  • 4