I am working on the delete option by double click in OpenLayers. I use the following code:

 map.on('dblclick', function(evt) {
  var selectCollection = selectInteraction.getFeatures();
  if(selectCollection.getLength() > 0){
   var answer = window.confirm("Do you want to delete?")
   if (answer) {
   vectorLayer.getSource().removeFeature(selectCollection.item(0));
    }
  }
 }); 

based on these examples:

https://gis.stackexchange.com/questions/126581/openlayers-3-capturing-various-click-events

How to create a dialog with “yes” and “no” options

everything would be perfect, but I cannot delete the linestrings and points at some point.

As you can see below, all the shapes which have the "filled surface" can be deleted easily after the selection.

I am getting the

**Vector.js:906

Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')**

instead.

I don't know how to fix it frankly. By reading this hint:

Cannot read property 'forEach' of undefined

I think, that I should use the push method, although I see no option for distinguishing my selectInteraction between the separate geometry.

My full JSFiddle is here:

https://jsfiddle.net/skwbdx0j/

Is there any option to fix it?

UPDATE:

Placing a certain variable inside the getSource didn't resolve this issue.

 map.on('dblclick', function(evt) {
 var selectCollection = selectInteraction.getFeatures();
 if(selectCollection.getLength() > 0){
 var answer = window.confirm("Do you want to delete?")
  if (answer) {
  
  vectorLayer.getSource(lineInteraction).  // the same line
   removeFeature(selectCollection.item(0));           }
      }       
   });