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的新元素不存在。这样，绑定到删除字段的函数的唯一元素就是DOM元素上已经存在的元素。

幸运的是，这是一个非常常见的错误，也是一个非常简单的错误。您只需要使用jQuery的.on函数绑定永久父元素：

$(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）当你在听众中使用＆＃34;这个＆＃34;引用对象

2）使用最近而不是parent（）。parent（）。parent（）或者如果HTML改变你的函数将无用：

3）制作＆＃34; remove_field＆＃34;一个类，因为你有多个具有相同id的元素，并且之前的注释声明是无效的HTML

$（本）.closest（＆＃39; div.phone级＆＃39）除去（）;

如何使用jquery删除父div？

2 个答案: