Remove options from select with jQuery

Question

I’m trying to take out all the option's of a select I have, but I’ve used up all the code of the jQuery but they don’t come out. I’m making a filter where the person will select a city and after selecting jQuery makes a request Ajax to the PHP that returns cities to make some options a second select. This he usually does, but in case the person is in the third select and change the first for example (city) so it has to restart the other filters, zeroing the option's second and third, and that’s what I’m not getting.

I’ve tried to:

$("#profissionalFiltro").find('option:not(:first)').remove();

$("#profissionalFiltro option").remove();

$("#profissionalFiltro").empty();

But none solved.

Answer 1

The last line is to work. See the example

<select id="profissionalFiltro">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<button id="limpar">Limpar</button>

$("#limpar").click(function(event) {
    $("#profissionalFiltro").empty();
    //$("#profissionalFiltro option").remove(); //essa tambem funciona
});

There must be some other problem that isn’t working

https://jsfiddle.net/ht4oj8r0/1/

Answer 2

Simply 'clear' the select html, as follows:

$("#profissionalFiltro").html('');

Or so:

$("#profissionalFiltro").html('<option value="">Selecione</option>');

Answer 3

Assuming in the code the first line has a value

<select id="profissionalFiltro">
    <option value="0">Selecione um "opção"</option>
    <option>Opção 1</option>
    <option>Opção 2</option>
    <option>Opção 3</option>
</select>

no js you can put

$("#profissionalFiltro").val("0");
$('#profissionalFiltro option:not(:selected)').remove();