Hiding elements using jQuery is not removing the space of the elements

Question

So I was wondering if anyone has an idea how to fix the following problem:

I have a drop-down menu with several options. Each option changes the page, while the header keeps the same pretty much.

All is working fine, but there another dropdown that simply either shows all of the options or hides some, to filter.

The problem is when I hide some, it creates some weird spaces in the first drop-down menu. I know I can create a different drop-down for each option on the second menu, but it seems like that solution is not optimal, so I was wondering if there's another one.

Here's a simplified fiddle showing my problem:

$('#select6, #select5, #select4, #select3, #select2, #select1').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col"> 

        <select class="form-control" id="matrizsele" onchange="location = this.options[this.selectedIndex].value;">
    <option disabled></option>
    <option id="select1" value="{{ route('layouts.documentos.matriz') }}">COMERC</option>
    <option id="select2" value="{{ route('layouts.documentos.matrizes.matriz2') }}">COMERC</option>
    <option id="select3" value="{{ route('layouts.documentos.matrizes.matriz3') }}">COMERC</option>
    <option id="select4" value="{{ route('layouts.documentos.matrizes.matriz4') }}">COMERC</option>
    <option id="select5" value="{{ route('layouts.documentos.matrizes.matriz5') }}">COMERC</option>
    <option id="select6" value="{{ route('layouts.documentos.matrizes.matriz6') }}">COMERC</option>
    <option disabled></option>
    <option id="select7" value="{{ route('layouts.documentos.matrizes.matriz7') }}">CONTR</option>  
    <option id="select8" value="{{ route('layouts.documentos.matrizes.matriz8') }}">CONTR</option>
    <option disabled></option>
    </select>
    </div>

JS fiddle

Answer 1

Those extra blanks are not spaces, those are empty disabled options.Remove the following from HTML snippet and it should work.

<option disabled></option>

Answer 2

You need to remove disabled options from your HTML.

<div class="col"> 
<select class="form-control" id="matrizsele" onchange="location = this.options[this.selectedIndex].value;">
    <option id="select1" value="{{ route('layouts.documentos.matriz') }}">COMERC</option>
    <option id="select2" value="{{ route('layouts.documentos.matrizes.matriz2') }}">COMERC</option>
    <option id="select3" value="{{ route('layouts.documentos.matrizes.matriz3') }}">COMERC</option>
    <option id="select4" value="{{ route('layouts.documentos.matrizes.matriz4') }}">COMERC</option>
    <option id="select5" value="{{ route('layouts.documentos.matrizes.matriz5') }}">COMERC</option>
    <option id="select6" value="{{ route('layouts.documentos.matrizes.matriz6') }}">COMERC</option>
    <option id="select7" value="{{ route('layouts.documentos.matrizes.matriz7') }}">CONTR</option>  
    <option id="select8" value="{{ route('layouts.documentos.matrizes.matriz8') }}">CONTR</option>
</select>
</div>

JS

$('#select6, #select5, #select4, #select3, #select2, #select1').hide();

Disabled option are causing the space when you hide other options. Here is an updated fiddle.