push and pop item in array on onchange event :javascript

Question

I am working with the datatable, where data filled from api service.

I am adding checkboxes to eash row in action column.

When i click checkbox is checked, the value of that specific record passed to javascript function using 'onchange' event.

Same with the uncheck function.

Sample Script

//checkbox added to each row holding unique id(ignored mentioning variables)
var passingId,orgName;
var dataList=[];

<td><input type="checkbox" id=passingId onchange="checkThis(passingId + ',' + orgName )"/></td>

function checkThis(ids, oName) {
            var el = document.getElementById(ids);
            if (el.checked) {
                $.post("demo_test_post.asp",
                {
                    OId: ids,
                    ONAme: oName
                });
                var listItemAdd = oName;
                dataList.push(listItemAdd);
                alert(dataList);
            }
            else if (!el.checked) {
                $.post("demo_test_post.asp",
                {
                    OId: ids,
                    ONAme: oName
                });
                var listItemRemove = oName;
                dataList.pop(listItemRemove);
                alert(dataList);
            }
        }

This method push data to array when any record is check.

When unchecked, the record of that row(oName only in this case) must be removed from array.

Adding part has no problem, removing part is working but not removing selected value but removes last stored value. I am surely missing something, as i am new to javascript can't understand the examples.

If someone can help, please do help.Thanks for your time.

Answer 1

pop is a Stack operation, which removes last element of the array. Instead you should use something like search the given element and remove it, as shown below

var listItemRemove = oName;
var index = dataList.indexOf(listItemRemove);
if(index >= 0) dataList.splice(index, 1);

Answer 2

What you should do, is replace the pop to splice, in order to do so, you need to find the removed element index in the array.

function checkThis(ids, oName) {
            var el = document.getElementById(ids);
            if (el.checked) {
                $.post("demo_test_post.asp",
                {
                    OId: ids,
                    ONAme: oName
                });
                var listItemAdd = oName;
                dataList.push(listItemAdd);
                alert(dataList);
            }
            else if (!el.checked) {
                $.post("demo_test_post.asp",
                {
                    OId: ids,
                    ONAme: oName
                });
                var removeItemIndex = dataList.indexOf(oName);
                if (removeItemIndex != -1) dataList.splice(removeItemIndex, 1);  //remove at this index - remove 1
                alert(dataList);
            }
        }

You can read more about splice here

Answer 3

Array.pop() always removes the last element in the array. In order to remove a specific element you must search for it and remove it. This can be done using Array.indexOf to find the index of the element and Array.splice to remove it.

var index = dataList.indexOf(listItemRemove);
if (index !== -1){
    dataList.splice(index, 1);
}

Alternatively you could use the Array.filter function to remove all elements matching the search item.

dataList = dataList.filter(function(element){
    return element !== listItemRemove;
});

http://jsfiddle.net/ve8puvk3/