Удаление родительского элемента при нажатии с помощью 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(); 
});