How can I remove a parent div using jquery?

Question

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> 

Answer 1

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> 

Answer 2

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();