Hiding elements with jQuery does not remove element space

Question

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

I have a drop down menu with several options. Each parameter modifies the page, while the title retains the same.

Everything works fine, but there is another drop-down menu that simply displays all 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 that I can create a different drop-down list for each option in the second menu, but it seems that this solution is not optimal, so I was wondering if there is another one.

Here is a simplified script 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 violin

Answer 1

These extra spaces are not spaces; these are empty disabled options. Remove the snapshot from the HTML snippet and it should work.

 <option disabled></option> 

Answer 2

You need to remove the 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(); 

A disabled option causes a space when you hide other options. Here is the updated fiddle.

Answer 3

You should remove this (option) instead of disabled.

 $("#matrizsele option[value='X']").each(function() { $(this).remove(); }); 

Note. Here X is your parameter value

Answer 4

hiding is not a problem; try removing the meaningless code that looks like this: <option disabled></option>

Here's the fixed script: https://jsfiddle.net/nf8m46Lm/19/

The strange "interval" you are talking about is from <option disabled></option> . This is an empty disabled option, of course, it displays an empty entry. To better understand this, try changing the code to <option disabled>foobarentry</option> .