Removing array items on button clicked

Question

I have a form that allow user to enter a shift information (screenshot below).
I created an array to hold the value of the the table. The value is added into the array when user click 'Add'

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

How do I remove the item from the TehcnicianItems when 'Remove' button is clicked? I try to remove the row, but it doesn't work either.

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

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Dave, Apr 06 '16 at 19:33

score 1 · Accepted Answer · answered Apr 06 '16 at 19:43

Here is a example similar to your requirements. The click event listener on .remove in your case is not working because at the time of execution of the addition of event listner, the elements are not available in DOM. So adding a listener on document

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>

Thank you, I'm able to delete the row. But how do I remove it from the corresponding TechnicianItems array? When I click the 'Create' button, it's still creating 2 rows instead of just 1. — Eric, Apr 06 '16 at 21:16
To delete the item from the Array, you will somehow find the index of the the deleted item, you can store data-index attribute to the tr element and read this attribute and then use splice() method to remove the element. Regarding multiple row creation, can you please tell me which element has the id `TechnicianAdd` — Sujeet Jaiswal, Apr 06 '16 at 21:26
It doesn't have id yet. The id will be generated on insert. This is a parent child relationship, similar to order and order detail form. Everything is inserted after you press the submit button. There's no id I can use. — Eric, Apr 07 '16 at 15:09

Removing array items on button clicked

1 Answers1