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? — Dave
– Dave, Commented Apr 6, 2016 at 19:33

Sujeet Jaiswal · Accepted Answer · 2016-04-06 19:43:20Z

1

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>

answered Apr 6, 2016 at 19:43

Sujeet Jaiswal

1,0897 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eric Over a year ago

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.

Sujeet Jaiswal Over a year ago

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

Eric Over a year ago

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.

Collectives™ on Stack Overflow

Removing array items on button clicked

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related