jqueryを使用して親divを削除するにはどうすればよいですか？

Question

最初のdivとそれ以外はすべて削除します。 ここでコードスニペットで最初の入力を削除できますが、それ以上追加すると他の入力は削除できません。

私のページでは入力を削除できません。 ID remove_fieldとの新しい要素は、あなたの準備ができて、この関数の実行時間によって存在していなかったので、たまたま

$(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"--> 
 
\t <label for="telefones">Telefone</label> 
 
\t <div class="input-group"> 
 
\t \t <input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone"> 
 
\t \t <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> 
 
\t </div> 
 
</div> 
 
</div>

Answer 1

。この方法で、フィールドを削除する関数に結合されている唯一の要素は、すでにDOM要素にある要素だけです。

幸いなことに、これはかなり一般的な間違いであり、公正な解決方法もあります。

$(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"--> 
 
\t <label for="telefones">Telefone</label> 
 
\t <div class="input-group"> 
 
\t \t <input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone"> 
 
\t \t <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> 
 
\t </div> 
 
</div> 
 
</div>

Answer 2

1）あなたは、リスナーの使用の内側にある場合は、「この」オブジェクト

2を参照する）：あなたはjQueryの.on機能を使用して永続的な親要素をバインドする必要があります

3）同じIDを持つ複数の要素があるので、 "remove_field"をクラスにします。また、同じIDを持つ複数の要素があるので、あなたの関数は役に立たなくなります。前のコメントが無効であると述べたように、HTML

$（this）.closest（ 'div.phone-class'）。remove（）;