動的に追加されたフィールドを削除する際のエラー

Question

3つのフィールドを動的に追加しようとしています（2つのテキストフィールドと1つの削除ボタン）。追加ボタンが正常に動作しています。問題は、remove関数です。削除ボタンのみを削除しますが、他の2つのフィールドは削除しないでください。

これは私のhtmlコードです：

<div class="col-lg-12"> 

    <div class="field_wrapper form-group col-sm-12"> 
     <div class="form-group col-sm-4"> 
      <input type="text" name="id[]" value="" class="form-control"/> 
     </div> 
     <div class="form-group col-sm-4"> 
      <input type="text" name="name[]" value="" class="form-control"/> 
     </div> 
     <div class="form-group col-sm-4"> 
      <a href="javascript:void(0);" class="add_button btn btn-primary" title="Add field">Adicionar Valor</a> 
     </div> 
    </div> 

</div> 

これはjavascriptのである：

<script type="text/javascript"> 
$(document).ready(function(){ 
    var maxField = 10; //Input fields increment limitation 
    var addButton = $('.add_button'); //Add button selector 
    var wrapper = $('.field_wrapper'); //Input field wrapper 
    //var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button btn btn-danger2" title="Remove field">Remover</a></div>'; //New input field html 
    var fieldHTML = '<div class="field_wrapper form-group col-sm-12"><div class="form-group col-sm-4"><input type="text" name="id[]" value="" class="form-control"/></div><div class="form-group col-sm-4"><input type="text" name="name[]" value="" class="form-control"/></div><div class="form-group col-sm-4"><a href="javascript:void(0);" class="remove_button btn btn-primary" title="Add field">Remover</a></div></div>'; //New input field html 
    var x = 1; //Initial field counter is 1 
    $(addButton).click(function(){ //Once add button is clicked 
     if(x < maxField){ //Check maximum number of input fields 
      x++; //Increment field counter 
      $(wrapper).append(fieldHTML); // Add field html 
     } 
    }); 
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked 
     e.preventDefault(); 
     $(this).parent('div').remove(); //Remove field html 
     x--; //Decrement field counter 
    }); 
}); 
</script> 

私はこれをどのように修正することができますか？

Answer 1

、それはあなたに、ボタンの形-グループを与え、意図されていない.field_wrapper代わりに、あなたが追加した要素を見つける.closest('.field_wrapper')を使用してください。

詳細については、fiddleをご確認ください。

Answer 2

ちょうど変更：

$(this).parent('div').remove(); 

のために：問題はあなたが$(this).parent('div')を削除しているということです

$(this).closest('.field_wrapper').remove(); 

Answer 3

使用

$(this).parent('div').parent('div').remove() 

Working fiddle