How do I temporarily remove an option in a select statement in Microsoft Edge?

In my code I take advantage of the ability to disable and enable style tags to hide/show optgroup tags and their option tags. However when hiding optgroups this way in Microsoft Edge, it places a blank line instead of no line at all.

An example:

<optgroup class="my-option" label="truck">
  <option class="business">Business truck</option>
</optgroup>



<style id="enable_disable">
  .my-option {display: none; visibility:hidden;}
</style>

Then, in my javascript code I hide the optgroup this way:

document.getElementById('enable_disable').media = 'all';

To show the optgroup I do this:

document.getElementById('enable_disable').media = 'disable';

The same thing occurs if I do this just for the "business" class, except the user can select the option, he or she just can't see text, just a blank line.

Edit: Here is a working example of what I am doing. You can see that it behaves the same in all browsers except for edge.

Solution

Using CSS to hide the children of a <select> element is not advisable (for now, at least). The results will be different across all major browsers. If you wish to remove an option, or a set of options, you should actually remove them with JavaScript.

Some inconsistencies between major browsers:

Chrome, Firefox, and Edge will show the first item, even if it has display: none.
Chrome, and Firefox will reactively hide the first item, if it is to be hidden, when another option is selected from the dropdown list.
Firefox will allow you to select otherwise hidden values if you focus on the select element, and then press the up and down arrows to cycle through options.

If you maintain a reference to the removed element, moving it around is trivial.