無法刪除動態生成的輸入點擊

Question

我試圖通過單擊按鈕生成一個新的表單組。但之後，我無法刪除選定的組，因爲點擊事件不起作用。 這裏是小提琴例如：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

你不能有一個網頁上的相同id多個項目。改爲使用班級。

此外，動態綁定的，你應該使用

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