javascript - 如何使用 jquery 删除父 div？

Question

我想删除第一个 div 和里面的其他所有内容。在代码片段中，我可以删除第一个输入，但如果添加更多输入，则无法删除其他输入。

在我的页面上，我无法删除任何输入。

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

发生这种情况是因为在您的就绪函数运行时，具有 id remove_field 的新元素还不存在。这样，绑定(bind)到删除字段的函数的唯一元素就是 DOM 元素上已经存在的元素。

幸运的是，这是一个非常常见的错误，而且也很容易解决。您只需要使用 jQuery 的 .on 绑定(bind)一个永久父元素即可。功能:

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