クリック時に動的に生成された入力を削除できません

Question

ボタンをクリックして新しいフォームグループを生成しようとしました。しかしその後、クリックイベントは機能しないので、選択したグループを削除することはできません。あなたは、Webページ上に同じid持つ複数のアイテムを持つことはできませんhttps://jsfiddle.net/f4v25ert/

(function($) { 
    'use strict'; 
    $(document).ready(function() { 

    $('.add').on('click', function(e) { 
     e.preventDefault(); 
     $('.groups').append('\ 
     <div class="form-group">\ 
      <input type="text">\ 
      <a href="#" id="remove-input">Remove</a>\ 
     </div>\ 
     '); 
    }); 

    $('#remove-input').on('click', '.form-group', function(e) { 
     e.preventDefault(); 
     $(this).parent('.form-group').remove(); 
    }); 

    }); 
    }(jQuery)); 

Answer 1

// Here is your working code 
(function($) { 
    'use strict'; 
    $(document).ready(function() { 

    $('.add').on('click', function(e) { 
     e.preventDefault(); 
     $('.groups').append('\ 
     <div class="form-group">\ 
      <input type="text">\ 
      <a href="#" class="remove-input">Remove</a>\ 
     </div>\ 
     '); 
    }); 

    $(document).on('click','.remove-input' , function(e) { 

     e.preventDefault(); 
     $(this).closest('.form-group').remove(); 
    }); 

    }); 
}(jQuery)); 

Answer 2

： はここにフィドルの例です。代わりにクラスを使用してください。この誰も助けることはできないよう

また、動的結合のために、あなたは

$(document).on('event', 'selector', function(){ 
    /* your code here */ 
}); 

(function($) { 
 
    'use strict'; 
 
    $(document).ready(function() { 
 

 
    $('.add').on('click', function(e) { 
 
     e.preventDefault(); 
 
     $('.groups').append('\ 
 
     <div class="form-group">\ 
 
      <input type="text">\ 
 
      <a href="#" id="remove-input" class="remove">Remove</a>\ 
 
     </div>\ 
 
     '); 
 
    }); 
 

 
    $(document).on('click', '.remove', function(e) { 
 
    \t e.preventDefault(); 
 
     $(this).prev().remove(); 
 
     $(this).remove(); 
 
    }); 
 

 
    }); 
 
}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="add">Add input</button> 
 
<div class="groups"> 
 
    <div class="form-group"><input type="text"></div> 
 
</div>