Ramon Carvalho Ramon Carvalho - 2 months ago 8
HTML Question

How can I remove a parent div using jquery?

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

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>