Remove more than 1 select option using JavaScript

I have 3 columns of HTML selection fields which need to load otions dependent on the previous selection fields.

Selection in column 2 values will be dependant on selected value in column 1 selection. I have this raw JavaScript below which add 2 selection options to a an HTML select filed and then removes 2 based on the select value in selection 1.

My problem is that the part that removes the 2 selection field options is not removing both options but instead removes 1 of them.

As I stated, you're getting the issue, very simply, because the for loop is started from index 0 and working your way up. When you remove an element, you remove it from the NodeList of options. Easiest way I know of is to start from the end of the node list and work your way to node number 0.