Remove item from a nested array by indices in JavaScript

Suppose we have a nested array of objects like this:

const arr = [
    { value: 'some value' },
    {
        array: [
            { value: 'some value' },
            {
                array: [
                    { value: 'some value' },
                    { value: 'some value' },
                ],
            },
            { value: 'some value' },
            {
                array: [
                    { value: 'some value' },
                    {
                        array: [
                            { value: 'delete me' },
                            { value: 'some value' },
                        ]
                    },
                ],
            },
        ],
    }
];

We need to write a JavaScript function that takes a nested array as the first argument and an array of indices as the second argument. The function should navigate through the nested structure using the indices and remove the item at the final index position.

Understanding the Index Path

The indices array represents a path through the nested structure. For example, [1, 3, 1, 0] means:

• Go to index 1 in the root array
• Go to index 3 in the nested array
• Go to index 1 in the next nested array
• Remove the item at index 0 in the final array

Solution

const arr = [
    { value: 'some value' },
    {
        array: [
            { value: 'some value' },
            {
                array: [
                    { value: 'some value' },
                    { value: 'some value' },
                ],
            },
            { value: 'some value' },
            {
                array: [
                    { value: 'some value' },
                    {
                        array: [
                            { value: 'delete me' },
                            { value: 'some value' },
                        ]
                    },
                ],
            },
        ],
    }
];

const keys = [1, 3, 1, 0];

const removeByIndices = (arr, keys) => {
    const recursiveFilter = (arr, level) => {
        const result = [];
        arr.forEach((element, index) => {
            // If current index doesn't match the key at this level, keep the element
            if (keys[level] !== index) {
                return result.push(element);
            }
            
            // If we haven't reached the final level and element has nested array
            if (level + 1 !== keys.length && element.array) {
                result.push({ array: recursiveFilter(element.array, level + 1) });
            }
            // If we've reached the final level, we skip this element (effectively removing it)
        });
        return result;
    };
    
    return recursiveFilter(arr, 0);
};

console.log(JSON.stringify(removeByIndices(arr, keys), null, 2));

Output

[
  {
    "value": "some value"
  },
  {
    "array": [
      {
        "value": "some value"
      },
      {
        "array": [
          {
            "value": "some value"
          },
          {
            "value": "some value"
          }
        ]
      },
      {
        "value": "some value"
      },
      {
        "array": [
          {
            "value": "some value"
          },
          {
            "array": [
              {
                "value": "some value"
              }
            ]
          }
        ]
      }
    ]
  }
]

How It Works

The algorithm uses recursion to traverse the nested structure:

1. Level tracking: Each recursion level corresponds to an index in the keys array
2. Filtering: Elements that don't match the current key index are preserved
3. Recursive descent: When an element matches the key but we haven't reached the final level, we recursively process its nested array
4. Removal: At the final level, matching elements are simply not added to the result

Conclusion

This approach efficiently removes items from deeply nested arrays using an index path. The recursive function maintains the original structure while filtering out the target element at the specified location.