Resumo : neste tutorial, você aprenderá como usar JavaScript para remover itens de um elemento selecionado com base em uma condição.
JavaScript usa a HTMLSelectElement classe para representar o <select>elemento. Para remover uma opção de um elemento selecionado, você usa o remove()método do HTMLSelectElement objeto.
Suponha que o <select>elemento tenha três <option>elementos com os índices correspondentes 0, 1 e 2:
Por exemplo:
| Valor | Texto | Índice |
|---|---|---|
| A | Artigo A | 0 |
| B | Artigo B | 1 |
| C | Artigo C | 2 |
Quando você chama o remove()método para remover um elemento, o índice muda imediatamente.
Por exemplo, se você remover o segundo elemento ( B) com índice 1, o índice do terceiro elemento ( C) se tornará 1:
| Valor | Texto | Índice |
|---|---|---|
| A | Artigo A | 0 |
| C | Artigo C | 1 |
Um erro comum é iterar sobre as opções de um <select>elemento e remover o elemento dentro do loop sem saber que os índices foram ajustados.
Por exemplo, as seguintes tentativas de remover itens com os valores Be C. No entanto, ele apenas remove o item B, mas não C.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
</head>
<body>
<label for="list">Alphabet</label>
<select id="list">
<option value="A">Item A</option>
<option value="B">Item B</option>
<option value="C">Item C</option>
</select>
<script>
const select = document.querySelector('#list')
for (let i = 0; i < select.options.length; i++) {
const value = select.options[i].value;
if (value === 'B' || value === 'C') {
select.remove(i);
// index of C will become 1 but the value of i is 2
// therefore C will be not removed
}
}
</script>
</body>
</html>Linguagem de código: HTML, XML ( xml )Saída:
Para remover item C, você precisa diminuir o índice após remover item B. O exemplo a seguir funcionará corretamente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
</head>
<body>
<label for="list">Alphabet</label>
<select id="list">
<option value="A">Item A</option>
<option value="B">Item B</option>
<option value="C">Item C</option>
</select>
<script>
const select = document.querySelector('#list')
let indices = []
for (let i = 0; i < select.options.length; i++) {
const value = select.options[i].value;
if (value === 'B' || value === 'C') {
select.remove(i);
// decrease i by one because the index has been
// adjusted
i--
}
}
</script>
</body>
</html>Linguagem de código: HTML, XML ( xml )Saída:
Um exemplo prático
O exemplo a seguir ilustra como excluir itens de uma lista onde o texto do item termina com a string js.
Aqui está a estrutura do projeto:
├── css
| └── style.css
├── js
| └── app.js
└── index.htmlindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Demo</title>
</head>
<body>
<main>
<label for="framework">Framework:</label>
<select id="framework" multiple>
<option value="1">Angular</option>
<option value="2">React</option>
<option value="3">Vue.js</option>
<option value="4">Ember.js</option>
<option value="5">Svelte</option>
<option value="6">Next.js</option>
</select>
<p>Click the Remove button to remove framework ended with js like Vue.js</p>
<button class="btn">Remove</button>
</main>
<script src="js/app.js"></script>
</body>
</html>Linguagem de código: HTML, XML ( xml )aplicativo.js
const select = document.querySelector('#framework');
const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
for (let i = 0; i < select.options.length; i++) {
const text = select.options[i].text;
if (text.endsWith('js')) {
select.remove(i);
i--;
}
}
});Linguagem de código: JavaScript ( javascript )Saída:
