Удаление элементов массива при нажатии кнопки

Question

У меня есть форма, которая позволяет пользователю вводить информацию о смене (снимок экрана ниже).
Я создал массив для хранения значения таблицы. Значение добавляется в массив, когда пользователь нажимает «Добавить»

$(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() 
}); 

Как удалить элемент из TehcnicianItems, когда «Удалить» нажата кнопка? Я пытаюсь удалить строку, но она не работает.

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