jQuery - remove items in array using splice, but return array with remaining items, not with the removed item

Question

I'm having a major problem trying to do something that is very simple. I'm pushing elements into an array based on the value of a select element.

I'm pushing elements in fine, but if the user changes the select option to 'No' i want to remove a particular element from the array. I have google far and wide and tried lots of things and the array splice method seems to be the way to go.

My issue is, that according to the documentation, the returned array is the elements that are removed. I don't want this, i want the elements that are remaining in the array.

The code i have implemented almost works but not quite. I can add into the array and if there is only one array item i can remove it OK. If there is more than one item inside, then when i remove the required element it returns the removed element inside the array, where as i want to return the remaining elements inside the array.

Here is my code so far

    var pplArray = [];

    $("#ddl_KnowlComp").change(function () {
        if($('#ddl_KnowlComp').find("option:selected").text() == 'Yes' ){
            $('#d_KnowlCompDate').attr('required', 'required');
            pplArray.push( $("#ppl_KnowlSigned_TopSpan_HiddenInput"));

            console.log(pplArray);

        } else {
            $('#d_KnowlCompDate').removeAttr('required');
            $('#d_KnowlCompDate').val('');

            var itemtoRemove = $("#ppl_KnowlSigned_TopSpan_HiddenInput");
            removeArrayItem(itemtoRemove,pplArray);

        } 
    });

    $("#ddl_IniComEngComp").change(function () {
        if($('#ddl_IniComEngComp').find("option:selected").text() == 'Yes' ){
            $('#d_IniComEngCompDate').attr('required', 'required');
            pplArray.push ($("#ppl_IniComEngCompSigned_TopSpan_HiddenInput"));
            console.log(pplArray);

        }  else {
            $('#d_IniComEngCompDate').removeAttr('required');
            $('#d_IniComEngCompDate').val('');

            var itemtoRemove = $("#ppl_IniComEngCompSigned_TopSpan_HiddenInput");
            removeArrayItem(itemtoRemove,pplArray);                

        } 
    });

    function removeArrayItem(itemtoRemove, arr){
      arr.splice($.inArray(itemtoRemove, arr),1);
      console.log(pplArray);
    }

If someone could point out my issue that would be great :-)

since `splice` mutates the array, `arr` will be an array containing only the existing elements. — shamsup, Dec 20 '17 at 09:05
Please add a [minimal, complete, and verifiable example](https://stackoverflow.com/help/mcve/) which shows the actual problem. — Andreas, Dec 20 '17 at 09:07
You can use jQuery.grep() https://stackoverflow.com/questions/3596089/how-to-remove-specific-value-from-array-using-jquery — Shiyas, Dec 20 '17 at 09:11
If you are maintaining your global "pplArray". Then no need to output the "newArray" in removeArrayItem(itemtoRemove, arr). Just use "console.log(pplArray);" instead of "console.log(newArray);". That should output the array you need. — JoshulSharma, Dec 20 '17 at 10:02

Ali G · Answer 1 · 2017-12-20T09:16:23.663

0

you should be able to have the new array! but I recommend to use splice(index, 1), get the index of the element and then just remove it, you should get a new array without it!

if you want to see the removed item:

1- can create a variable. 2- save the item to it before deletion based on the (index. 3- delete it. 4- use the variable you created to show it!

:)

edited Dec 20 '17 at 09:16

answered Dec 20 '17 at 09:02

Ali G

1
4

Michael Geary · Answer 2 · 2017-12-20T15:36:41.513

Since .splice() removes an item from the original array, you can simply ignore the return value from .splice() and use the original array.

For example where you have this:

  newArray = arr.splice($.inArray(itemtoRemove, arr),1);
  console.log(newArray);

Instead it would be this:

  arr.splice( $.inArray(itemtoRemove,arr), 1 );
  console.log(arr);

(I didn't check any of the rest of your logic, including the $.inArray() call, just advising on how to get the array with the elements removed - it's simply the original - now modified - array.)

score 0 · Answer 3 · answered Dec 20 '17 at 09:13

The $.grep() method removes items from an array as necessary so that all remaining items pass a provided test. The test is a function that is passed an array item and the index of the item within the array. Only if the test returns true will the item be in the result array.

The filter function will be passed two arguments: the current array item and its index. The filter function must return 'true' to include the item in the result array.

Ref : http://api.jquery.com/jquery.grep/

score 0 · Answer 4 · answered Dec 20 '17 at 09:20

You have 2 problems:

splice(-1, 1) will replace the last element of the array
splice modifies the original array

Some clarifications:

let arr = [1, 2, 3];
const iFound = 2;
const iNotFound = 4;

const p1 = arr.indexOf(iFound);
console.log(`${iFound} found at ${p1}`);

const p2 = arr.indexOf(iNotFound);
console.log(`${iNotFound} found at ${p2}`);

arr.splice(p1, 1, 'x');

console.log(arr);

// your problem is here
// for the case where the element is not found
// it will be replaced the last element 
// in the collection
arr.splice(p2, 1, 'x');
console.log(arr);

The fix for your code would be:

  function removeArrayItem(itemtoRemove, arr){
      let pos = $.inArray(itemtoRemove, arr);

      //Note: splice modifies the original array
      pos >-1 && arr.splice(pos,1);
      console.log(arr);
  }

jQuery - remove items in array using splice, but return array with remaining items, not with the removed item

4 Answers4