動的に追加されたdivを削除するjavacript

Question

私は3つのテキストフィールドを追加ボタンでクリックすると1つの削除アイコンでクローンしたいと思っています。

は、今私は、削除ボタンをクリックしたときに、その特定のdivの最後の3つのテキストフィールドを削除したい...しかし、私のコードは

はこれを解決するために私を助けてください...私のフォームのすべての動的に追加のテキストフィールドを削除します。..これはトップレベルのコンテナを選択し、それを削除するよう..

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

問題が.parents('#excercises')の使用です。

より良い解決策は、このように、closest()を使用していることを削除し、その後、あなたは自分のdiv要素に追加し、すべての3つの入力を包むとするだろう：私はtype="button"を追加

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

注意あなたの<button>要素には、親要素formを提出しないと意味があります。