Javascript zum Entfernen dynamisch hinzugefügt div

Question

Ich habe 3 Textfeld, das ich mit einem Remove-Symbol auf Hinzufügen Schaltfläche klicken klonen wollen ... bis das funktioniert mein Code gut.

Jetzt möchte ich die letzten drei Textfelder des jeweiligen div auf Schaltfläche Entfernen klicken entfernen ... aber mein Code entfernt alle dynamisch hinzugefügt Textteil meiner Form ..

mir bitte helfen dieses Problem zu lösen .. ..

$('#add_exercise').on('click', function() { 
 
    $('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"></div>'); 
 
    $('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"></div>'); 
 
    $('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"><button class="remove">x</button></div>'); 
 
    return false; 
 
}); 
 

 
$('#exercises').on('click', '.remove', function() { 
 
    $(this).parents("#exercises").remove(); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset id="exercises"> 
 
    <div class="exercise"> 
 
    <input type="text" name="exercise[]"> 
 
    <input type="text" name="exercise[]"> 
 
    <input type="text" name="exercise[]"> 
 
    </div> 
 
    <button id="add_exercise">add exercise</button> 
 
    <button class="remove">x</button> 
 
</fieldset>

Answer 1

Das Problem ist mit der Nutzung von .parents('#excercises'), da dies die Top-Level-Container wählt und entfernt sie.

Eine bessere Lösung wäre, alle drei Eingänge wickeln Sie in ihrem eigenen div anhängen und entfernen Sie dann, dass closest() verwenden, wie folgt aus:

$('#add_exercise').on('click', function() { 
 
    $('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"><input type="text" name="exercise[]"><input type="text" name="exercise[]"><button type="button" class="remove">x</button></div>'); 
 
}); 
 

 
$('#exercises').on('click', '.remove', function() { 
 
    $(this).closest(".exercise").remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset id="exercises"> 
 
    <div class="exercise"> 
 
    <input type="text" name="exercise[]"> 
 
    <input type="text" name="exercise[]"> 
 
    <input type="text" name="exercise[]"> 
 
    <button type="button" class="remove">x</button> 
 
    </div> 
 
    <button type="button" id="add_exercise">add exercise</button> 
 
</fieldset>

Bitte beachte, dass ich hinzugefügt type="button" zu Ihre <button> Elemente, wie es für sie sinnvoll wäre, keine Eltern form Elemente zu übermitteln.