ボタンを押してjqueryを使用して行を削除する

Question

行を動的にカートに追加するコードを記述しています。その行を削除するには、すべての行の前にある削除ボタンをクリックします。ユーザーがボタンを押すと、そのボタンの親をつかんで、その行を削除するremove（）メソッドを実装する必要があります。しかし、私のために働いていないこの方法..誰かが私が間違ってやっていることを教えてくれる？以下は私のコードです

 <div class="container" id="dynamic"> 
       <div class="row " id="main-row"> 
        <div class="col-sm-1 " id="serial">1</div> 
        <div class="col-sm-2 "> 
        <select class="container-fluid"> 
         <option value="1">Computer</option> 
         <option value="2">Mobile</option> 
         <option value="3">LCD</option> 
         <option value="4">Keyboard</option> 
         <option value="5">Mouse</option> 
        </select> 
       </div> 
     <div class="col-sm-2 "><input class="length" type="number" min="1"   name="name" value="" /></div> 
      <div class="col-sm-2 "><input class="length" type="text" name="text"  value="" min="1" /></div> 
     <div class="col-sm-2"><input class="length" type="text" min="1"/></div> 
       <button class="btn-primary col-sm-1 del ">Delete</button> 
      </div> 

      </div> 
      <button class="btn btn-primary" id="button1">Add Row</button> 
     </section> 

ここは私のjqueryコードです。

//code for adding rows dynamically 
var counter = 1; 
$(function() { 

$("#button1").click(function() { 
    counter++; 
    $('#dynamic').append($("#main-row").clone().attr("id",counter-1)); 
    $("#serial").text(counter); 

    }); 
}); 
    //code for deleting row 
    $('.del').click(function() { 
    $(this).parent().remove(); 
    }); 

Answer 1

動的に行を追加するため、delegated event handlerを使用する必要があります。

".del"の代わりにthisを使用して、すべての行を削除しないようにしてください。

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

そうしないと、新しい.delオブジェクトはクリックイベントを取得しません。