Comecei a estudar javascript, e não estou conseguindo resolver esse problema, ao clicar na opção de horas eu preciso ler a hora que foi selecionada e logo depois apagar essa opção (hora), eu estou conseguindo ler, mas a opção(hora) não esta sendo deletada, como resolver?
<head>
<title>Teste</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">;
</head>
<body>
<div class="div=primeiro">
<select class="custom-select mr-sm-2" id="horario">
<option disabled selected value="">Horário</option>
</select>
</div>
<script src="agendaCompromissos.js"></script>
</body>
let select = document.querySelector(’#horario’);
let option = document.createElement(“option”);
option.setAttribute(“class”, “value-1”);
let textoOption = document.createTextNode(“09:00”);
option.appendChild(textoOption);
select.appendChild(option);
option = document.createElement(“option”);
option.setAttribute(“class”, “value-2”);
textoOption = document.createTextNode(“10:00”);
option.appendChild(textoOption);
select.appendChild(option);
option = document.createElement(“option”);
option.setAttribute(“class”, “value-3”);
textoOption = document.createTextNode(“11:00”);
option.appendChild(textoOption);
select.appendChild(option);
select.onclick = function(){
let valor = select;
let novovalor = valor[valor.selectedIndex].text;
console.log(novovalor);
select.removeChild(option);
}