Delete items from array

I am having trouble trying to do delete items from an array based on an id. If a user selects a checkbox the table row values are added to the array based on the row id. If a user unselects the checkbox, then the item should be deleted from the array based once again on the id.

However, what i happening, is that the array is getting populated correctly but if a user unchecks the box the id seems to be the id of the previous selection.

For example, I have 3 checkboxes. 1,2,3. If a user clicks boxes 2 and 3 it adds to array fine. If he then removes checkbox 2 it still has the value of 2 instead of 3. I think it has to do with hoisting.

I would be grateful if someone could check my code and help me to correct it. Many thanks

Added code to post

$(function () {
  $(document).on('click', '#rowClk', function () {

    jsonString = JSON.stringify(info);

$(function() {

  info = [];
  var id;
  $(document).on('click', '.rowChk', function() {
    if (this.checked) {
      var currentRows = $(this).closest("tr");
      var rackid = currentRows.find("td:eq(0)").html();
      //    var rackidnumber = currentRows.find("td:eq(1)").html();
      var rackservice = currentRows.find("td:eq(2)").html();
      var rackactivity = currentRows.find("td:eq(3)").html();
      var rackdept = currentRows.find("td:eq(4)").html();
      var rackcompany = currentRows.find("td:eq(5)").html();
      var rackaddress = currentRows.find("td:eq(6)").html();
      var rackuser = currentRows.find("td:eq(7)").html();
      var rackitem = currentRows.find("td:eq(8)").html();
      var rackddate = currentRows.find("td:eq(9)").html();
      var rackdate = currentRows.find("td:eq(10)").html();
      id = rackid;
      data = {};
      data.rackids = id;
      //    data.idnumber = rackidnumber;
      data.service = rackservice;
      data.activity = rackactivity;
      data.dept = rackdept; = rackcompany;
      data.address = rackaddress;
      data.user = rackuser;
      data.item = rackitem;
      data.intakedate = rackdate;
      data.destroydate = rackddate;
    } else {
      var index = info.findIndex(function(item) {
        return === id;
      if (index !== -1) {
        info.splice(index, 1);
        if (info.length === 0) {
          $('#rowClk').css('display', 'none');

DataTables button

"fnDrawCallback": function()
                 $("#nirqst_info").append("<input style='float:left; margin-right: 17px; display:none;' type='button' id='rowClk' value='Action'>");

Datatables input

{ data: null, 'width': '20', render: function (data, type, row, meta)
            if (type === 'display')
                data = '<input type="checkbox" class="rowChk" name="rowChk[]" />';
            return data;

html table

<table cellspacing="0" class="display stripe" id="nirqst" width="100%">
  <!--        <caption>New Intake Requests</caption>-->
      <th style='width: 4%;'>ID#</th>
     <th>Select<!--<input type="checkbox" id="select_all" name="select_intake" />--></th>
      <th>Destroy Date</th>
      <th>Request Date</th>

Can you show all your code for the project? It would be easier to test things out that way.

Do you have this in codepen? Can you share a link to it, if so?

here you go you need to make an account 1st then open up a new pen

Hi Randell I have added code as requested. Thanks

@slbccfl Unfortunately I don’t. Not sure how to use it. Thanks

Use the link and instructions I gave above if still to hard watch this tutoril vid;

@KittyKora Hi Kitty. I do not know how to use codepen. I shall attempt to make a fiddle later. But all the code is here and the only part that is relevant to my problem is in my original post. Thank

Okay just wanted to help :3 feel free to ask anything else if your stuck

"fnDrawCallback": function()
                 $("#nirqst_info").append("<input style='float:left; margin-right: 17px; display:none;' type='button' id='rowClk' value='Action'>");

Where is this located in your code?

It is much better to use a fiddle or Codepen or some other site that allows us to see and test everything as you have written it, instead of forcing us to try and piece together what you may have written.

I love how people nowadays know how to use IIFE, but don’t how to use codepen :slight_smile:
@poorbaldrick, how do you know it has value of 2?

This creates the action button which is hidden if there are no boxes ticked. This piece of code in the original post.

It really seems that id here is the last checked id. If it is, then here’s your problem…

1 Like

Hi iiiked. Thanks for reply. Yeh I thought that but I do not know how to correct it. I have tried various options with var id; but no joy. Can you help with this. Thanks

How about giving each checkbox an id and then

info[checkboxId] && info.splice(checkboxId, 1);

I thought about that. Problem is Would I need to create a dynamic id in the datatables input? I have created screenshots of problem so you can see the problem I am having.

boxes ticked with 33 being top one.

I can only post 1 image. But image 2 shows id34 instead of id33. That is the problem. When I unselect tickbox it should delete id34 from the array. Hope that is clearer. Thanks

In real-world scenario each row of your table would be an object with unique id and you will have to render bunch of them in non-manual way. In your rendering function you want to give each row (<tr>) that same id and then when checkbox is change'd (not click'd even though it also works), grandpa of your checkbox input would hold id you’re looking for :wink:

Sorry, you have totally lost me. Could you do example markup please? Thanks

Any further help with this please? Thanks