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

那些额外的空格不是空格，那些是空的禁用选项。从HTML片段中删除以下内容，它应该可以工作。

<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.

Answer 3

You have to remove this(option) instead of disabled.

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

Note: Here X is your option value

Answer 4

hiding isn't the issue; try removing meaningless code which is the following : <option disabled></option>

Here's a fixed fiddle : https://jsfiddle.net/nf8m46Lm/19/

The weird "spacing" you talk about is from <option disabled></option> . It's a blank disabled option, of course it displays a blank entry. To understand it better, try changing the code to <option disabled>foobarentry</option> .