クリックしたときに配列アイテムを削除する

Question

私は、シフト情報（以下のスクリーンショット）を入力するためのフォームを持っています。
テーブルの値を保持する配列を作成しました。ユーザーは時にボタンをクリックすると「削除」をどのように私はTehcnicianItemsから項目を削除するには

$(function() { 
    var TechnicianItems = []; 

    $('#TechnicianAdd').click(function() { 
     var isValidItem = true; 

     if (isValidItem) { 
      var $technicianId = parseInt($('#TechnicianId').val().trim()); 
      var $technicianText = $('#TechnicianId').children("option").filter(":selected").text().trim(); 
      var $shiftId = parseInt($('#ShiftId').val().trim()); 
      var $shiftText = $('#ShiftId').children("option").filter(":selected").text().trim(); 
      var $duration = parseFloat($('#TechnicianDuration').val().trim()); 
      var $break = parseFloat($('#TechnicianBreak').val().trim()); 
      var $comment = $('#TechnicianComment').val().trim(); 

      TechnicianItems.push({ 
       TechnicianId: $technicianId, 
       ShiftId: $shiftId, 
       Duration: $duration, 
       Break: $break, 
       Comment: $comment 
      }); 

      // Clear the fields after insert. 
      $('#TechnicianId').val(''); 
      $('#ShiftId').val(''); 
      $('#TechnicianDuration').val(''); 
      $('#TechnicianBreak').val(''); 
      $('#TechnicianComment').val(''); 

      // Append the newly added entry to #partlogs table. 
      $table = $('#shiftlogs>tbody').last(); 
      $row = $('<tr/>'); 
      $row.append($('<td/>').html($technicianText)); 
      $row.append($('<td/>').html($shiftText)); 
      $row.append($('<td/>').html($duration)); 
      $row.append($('<td/>').html($break)); 
      $row.append($('<td/>').html($comment)); 
      $row.append($('<td/>').html('<input type="button" class="remove" value="Remove" />')); 
      $table.append($row); 

     } //END if(isValidItem) 
    }); // END $('#TechnicianAdd').click() 
}); 

を「追加」をクリックすると、値が配列に追加されますか？私は行を削除しようとしますが、どちらもうまくいきません。

$('.remove').click(function() { 
    $(this).closest('tr').remove(); 
}) 

Answer 1

以下は、お客様の要件に似た例です。あなたのケースの.removeにあるクリックイベントリスナーは、イベントリスナーの追加の実行時に、DOMで要素が利用できないため動作していません。だから、書類上のリスナーを追加

function add() { 
 

 
    var str = '<tr><td>' + $('#usrInp').val() + '</td><td> <button class="remove">Remove</button></td></tr>' 
 
    $('table').append(str); 
 
    $('#usrInp').val(""); 
 
} 
 
$(document).on('click', '.remove', function() { 
 
    $(this).closest('tr').remove(); 
 
})

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

 
<table> 
 
    <tr> 
 
    <td> 
 
     <input type=text id="usrInp"> 
 
    </td> 
 
    <td> 
 
     <button onclick="add()">Add</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Row 1</td> 
 
    <td> 
 
     <button class="remove">Remove</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Row 2</td> 
 
    <td> 
 
     <button class="remove">Remove</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Row 3</td> 
 
    <td> 
 
     <button class="remove">Remove</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Row 4</td> 
 
    <td> 
 
     <button class="remove">Remove</button> 
 
    </td> 
 
    </tr> 
 
</table>