Como remover item de um select com JavaScript

Neste artigo você vai aprender a como remover item de um select com JavaScript, vamos utilizar uma simples abordagem!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Remover item de um select com JavaScript é uma tarefa relativamente simples, mas que pode ser muito útil em muitas aplicações web.

Em muitos casos, é necessário que o usuário possa selecionar um ou mais itens de uma lista, mas também é importante que ele possa remover itens que não deseja mais selecionar.

Neste artigo, vamos mostrar como você pode remover um item de um select usando JavaScript.

Antes de começar, é importante lembrar que, ao remover um item de um select, você estará alterando o conteúdo da página em tempo real.

Portanto, é necessário ter cuidado para não causar erros ou inconsistências no código.

Além disso, é importante garantir que a ação de remover um item seja clara e fácil para o usuário.

Vamos começar com o básico, o select é uma das tags HTML mais simples e comuns.

É usado para criar uma lista suspensa que permite ao usuário selecionar um item de uma lista. Para criar um select em HTML, basta usar a tag <select> e adicionar uma ou mais opções com a tag <option>.

Por exemplo:

<select id="mySelect">
  <option value="1">Opção 1</option>
  <option value="2">Opção 2</option>
  <option value="3">Opção 3</option>
  <option value="4">Opção 4</option>
</select>

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Neste exemplo, criamos um select com quatro opções. Cada opção tem um valor (1, 2, 3 ou 4) e um texto (Opção 1, Opção 2, etc.).

Agora, se quisermos remover uma opção específica, precisamos saber qual opção remover.

Uma das maneiras mais simples de remover um item de um select com JavaScript é usar a propriedade remove() da tag <option>.

A propriedade remove() remove o item selecionado da lista.

Para isso, precisamos obter uma referência ao select e, em seguida, obter uma referência ao item que queremos remover.

Podemos fazer isso usando o índice do item ou o valor do atributo value. Aqui está um exemplo de como remover a terceira opção:

var select = document.getElementById("mySelect");
select.options[2].remove();

Neste exemplo, selecionamos o select com o id “mySelect” e, em seguida, usamos a propriedade options para obter a lista de opções.

O índice do primeiro item é 0, o segundo é 1, o terceiro é 2 e assim por diante.

Portanto, selecionamos o terceiro item (índice 2) e chamamos a propriedade remove().

Se quisermos remover um item com base no valor do atributo value, podemos usar um loop para percorrer a lista de opções e encontrar o item com o valor desejado.

Aqui está um exemplo:

var select = document.getElementById("mySelect");
for(var i=0; i<select.options.length; i++) {
  if(select.options[i].value == "2") {
    select.options[i].remove();
    break;
  }
}

Neste exemplo, percorremos a lista de opções usando um loop for. Para cada item, verificamos se o valor do atributo value é igual a “2”.

Se for, removemos o item usando a propriedade remove() e interrompemos o loop usando a instrução break. Isso garante que apenas o primeiro item com o valor “2” seja removido.

Se houver mais de um item com esse valor, eles não serão removidos.

Também é possível remover todos os itens de um select usando um loop while.

Neste caso, usamos a propriedade length da lista de opções para obter o número total de itens e, em seguida, removemos cada item individualmente até que não haja mais nenhum item na lista.

Aqui está um exemplo:

var select = document.getElementById("mySelect");
while(select.options.length > 0) {
  select.options[0].remove();
}

Neste exemplo, usamos um loop while para remover todos os itens do select. A cada iteração, verificamos se ainda há itens na lista usando a propriedade length.

Se houver, selecionamos o primeiro item (índice 0) e o removemos usando a propriedade remove().

É importante lembrar que, ao remover um item de um select com JavaScript, você também deve atualizar qualquer outra parte da página que dependa do valor selecionado.

Por exemplo, se o valor selecionado é usado para exibir informações em outro lugar na página, você precisa atualizar essas informações para refletir a remoção do item.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Em conclusão, a remoção de itens de um select com JavaScript pode ser facilmente realizada usando a propriedade remove() da tag <option>.

É uma tarefa útil para melhorar a usabilidade das aplicações web, permitindo que os usuários possam selecionar e remover itens de uma lista de opções.

É importante lembrar que a remoção de um item pode ter impacto em outras partes da página que dependam do valor selecionado, e, portanto, deve-se tomar cuidado ao fazer a remoção e atualizar todas as outras partes relevantes da página.

Com as informações apresentadas neste artigo, é possível adicionar essa funcionalidade em suas aplicações web de forma fácil e segura.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

E se tiver mais de uma opção com o mesmo valor?

Repara que no exemplo acima a gente usou break, então só a PRIMEIRA opção com aquele valor sai da lista

Aí bate a dúvida: e se eu quiser tirar todas de uma vez?

O instinto é tirar o break e deixar o for rodar até o fim… só que aí mora uma pegadinha clássica

Quando você remove a opção do índice 1, quem estava no índice 2 escorrega pra o 1, o 3 vai pro 2 e por aí vai

O loop, coitado, já avançou pro próximo índice e acabou PULANDO a opção que escorregou

A solução é simples: percorra a lista de trás pra frente

var select = document.getElementById("mySelect"); for(var i = select.options.length – 1; i >= 0; i–) { } }

Começando pelo último índice, remover um item não mexe na posição dos que ainda faltam serem verificados

Ou seja: nada é pulado e todas as opções com aquele valor somem 🙂

Limpando o select, mas mantendo a primeira opção:

Na vida real quase sempre a primeira opção é aquele "Selecione uma opção", que você NÃO quer perder na limpeza

Se você rodar o while do exemplo anterior, ele leva tudo embora, inclusive esse placeholder

O ajuste é mínimo: pare quando sobrar um item e sempre remova o índice 1 (o segundo da lista)

var select = document.getElementById("mySelect"); while(select.options.length > 1) { }

O índice 0 nunca é tocado, então o placeholder continua ali firme

Muito útil quando você vai recarregar a lista com opções novas, tipo aquele select de cidades que muda conforme o estado escolhido

Bora testar aí no seu projeto?

Perguntas frequentes sobre remover item de um select:

O índice das opções começa em 0 ou em 1? Em 0, sempre

Por isso, pra remover a terceira opção você usa o índice 2

Quando remover pelo índice e quando remover pelo valor? Pelo índice é mais direto quando você já sabe a posição exata, tipo "apaga a última"

Pelo valor é mais seguro quando a ordem da lista pode mudar, porque o value continua o mesmo mesmo que a opção troque de lugar

Regra prática: se a lista é montada dinamicamente, vai de value

Meu loop pulou algumas opções, o que aconteceu? Clássico! Você removeu itens percorrendo a lista de frente pra trás

A cada remoção os índices seguintes escorregam uma casa e o loop acaba pulando um item

Percorra de trás pra frente que o problema some

Dá pra remover a opção que o usuário escolheu? Dá sim, e a lógica é a mesma dos exemplos acima

Você pega o valor que está selecionado no select e usa aquele loop que compara o value pra achar e remover a opção correspondente

Tome cuidado: depois de remover, o valor que estava selecionado não existe mais na lista, então atualize qualquer parte da tela que dependia dele