How to clear the combo box field with AXIOS?

Question

Context
Items are loaded from the selected template, but items are accumulating when a new template is selected.
Doubt
How to clear combo box data when another model is selected? Because item data is accumulating in the second combo box.

Model code: page edita.blade.php

  <!--Inicio do modal de Gerar Checklist--> 
  <div class="modal fade modal-default" id="modalGerarChecklist" aria-hidden="true" aria-labelledby="examplePositionCenter"
                 role="dialog" tabindex="-1">
                <div class="modal-dialog modal-center">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <h4 class="modal-title">Gerar Checklists</h4>
                        </div>
                        <div class="modal-body">
                        <div class="form-group col-md-18">
                             <input type="hidden" id="idProjeto" name="idProjeto" value="{{$projeto->id}}">
                             <label class="control-label">Modelos</label>
                            <select class="form-control" id="idModelo" name="idModelo"  required>
                                <option value="">Selecione</option>
                                @foreach($checklistsModelos as $checklistModelo)
                                    <option value="{{$checklistModelo->id}}" {{old('checklistModelo') == $checklistModelo->id ? 'selected' : ''}}>{{$checklistModelo->modelo}}</option>
                                @endforeach
                            </select> 
                            <br/>
                           <label class="control-label">Itens</label>
                            <select class="form-control" id="comboItens" name="comboItens[]"  multiple="multiple" disabled>
                            </select> 

                         </div>

                        </div><!--Fim do modal-body-->

                        <div class="modal-footer">
                        <center>
                            <a id="btnGerarChecklist" type="button" class="btn btn-primary gerarChecklist" data-dismiss="modal"  align="center" style="width: 300px; height: 40px">Gerar</a>
                        </center>
                        </div>
                    </div>
                </div>
            </div>
  <!--Fim do modal de Gerar Checklist--> 

Axios archive: project-begingChecklist.js

jQuery("#idModelo").change(function() {

        let idModelo = $( "#idModelo option:selected" ).val();

        axios.get('/projetos/comboItens/' + idModelo)
        .then(response => {
        // Super importante debugar o retorno....
        console.log(response)

        response.data.forEach((element, index, array) => {
        console.log(element)

        jQuery("#comboItens").append(`
        <option value="${element.id}">
        ${element.descricao_item}
        <option/>
        `);
        });
        })
        .catch(() => {
        console.log('error...')
        console.log('idModelo = '+ idModelo);
        })

    })

Combination() method of the Projectocontroller.php class:

 public function comboItens($id)
  {
    $checklistEstrutura = DB::table('checklist_estrutura')
    ->join('checklist_itens', 'checklist_estrutura.itens_id', '=', 'checklist_itens.id')
    ->where('checklist_estrutura.modelo_id', '=', $id)
    ->select('checklist_itens.id', 'checklist_itens.descricao_item')
    ->get(); 

     $checklistEstruturaArray = (array)  array_values($checklistEstrutura->toArray()) ; 




   return response()->json($checklistEstruturaArray);

  }

Answer 1

I used the following function in the file that contains Axios (project-generating Checklist.js)

jQuery("#comboItens"). Empty();

Code:

jQuery("#idModelo").change(function() {

        let idModelo = $( "#idModelo option:selected" ).val();

        jQuery("#comboItens").empty();
        axios.get('/projetos/comboItens/' + idModelo)
        .then(response => {
        // Super importante debugar o retorno....
        console.log(response)

        response.data.forEach((element, index, array) => {
        console.log(element)


        jQuery("#comboItens").append(`
        <option value="${element.id}">
        ${element.descricao_item}
        <option/>
        `);
        });
        })
        .catch(() => {
        console.log('error...')
        console.log('idModelo = '+ idModelo);
        })

    })