Entfernen eines übergeordneten Elements beim Klicken mit jQuery

Question

Ich habe Probleme beim Erstellen eines dynamischen Formulars, bei dem ein Benutzer ein Textfeld hinzufügen und entfernen kann. Die Funktionalität zum Hinzufügen eines zusätzlichen Feldes funktioniert gut, aber das Entfernen des Feldes scheint einfach nicht zu funktionieren.

Mein html ist:

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

Mein 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

Sie fügen den Klick-Listener, bevor das Element tatsächlich zu schaffen, zu verwenden:

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

diese Beispiele sehen http://api.jquery.com/on/#entry-examples

Answer 2

versuchen Sie es mit dieser

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