jQueryを使用してクリック時に親要素を削除する

Question

ユーザーがテキストフィールドを追加したり削除したりできる動的フォームの作成に問題があります。余分なフィールドを追加する機能はうまくいきますが、フィールドを削除するだけでは機能しないようです。

私のHTMLは次のとおりです。

<div class="formItem" id="members"> 
    <label for="workgroup">Add Members:</label> 
    <br /> 
    <a href="#" id="addMember">Add another member</a> 
    <p> 
    <input type="text" name="members[]" placeholder="Enter email" autocomplete="off" /> 
    </p> 
</div> 

マイJS：

$('#addMember').on('click', function() { 
    $('<p><input type="text" name="members[]" placeholder="Enter email" autocomplete="off" /><a href="#" id="removeMember">Remove</a></p>').appendTo('#members'); 
    return false; 
}); 

$('#removeMember').on('click', function() { 
    $(this).parent().remove(); 
}); 

Answer 1

あなたは、実際の要素を作成する前に使用をクリックしてリスナーを追加している：

$('#members').on('click', '#removeMember', function() { 
    $(this).parent().remove(); 
}); 

は、これらの例を参照してくださいhttp://api.jquery.com/on/#entry-examples

Answer 2

使用してみてください。この

$(document).on('click','#removeMember', function() { 
    $(this).parent().remove(); 
});