IDセレクタのJQueryの問題？

Question

私は、テキストボックスをユーザーが追加したり削除したりできるようにするプロジェクトに取り組んでいます。私は一般的な追加ボタンを押すと、その特定のテキストボックスのためのテキストボックスと削除ボタンを作成するように自分のコードを構造化しました。

私の問題は、最初のテキストボックスでのみ削除ボタンが機能し、残りのテキストボックスでは削除ボタンが押されていることを登録することさえできません。

お勧めはありますか？私はコードのスクリーンショットをここに含めました。あなたはイベントの代表団を見て、例えば高いセレクターを使用する必要があります - - あなたは「parentWrapper」のidを持つdiv要素の中に要素を追加している場合 - あなたができる要素が動的に追加されているので HTML code. JQuery code.

Answer 1

ボタンのclickイベントに親要素から委譲してアクセスします。この例では、deleteボタンに 'deleteButton'のクラスがあると仮定しています。

$(document).ready(function(){ 
 
    $('#addRow').click(function(){ 
 
    var index = $('.added').length+1 ; 
 
    $('#parentWrapper').append('<div class="added">Added Row ' + index + ' <button type="button" class="deleteButton">delete</button></div>') 
 
    }) 
 
    
 
    $('#parentWrapper').on('click','.deleteButton',function(){ 
 
    $(this).parent().remove(); 
 
    }); 
 
});

.added{margin-bottom:15px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button type ="button" id="addRow">click to Add a row</button> 
 
<hr/> 
 
<div id="parentWrapper"></div>