Se puede eliminar una opción de un cuadro de selección utilizando 2 enfoques en jQuery:
Método 1: Eliminar la opción en el cuadro directamente
La opción que se eliminará se selecciona al obtener el cuadro de selección. El valor que se eliminará se especifica en el selector de valores (value=’optionValue’) en el cuadro de selección. A continuación, se utiliza el método remove() para eliminar esta opción seleccionada.
Sintaxis:
$("selectBox option[value='optionValue']").remove()
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Removing an item from a select box
</title>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>Removing an item from a select box</b>
<p>
Select one from the given options:
<select id="select1">
<option value="free">
Free
</option>
<option value="basic">
Basic
</option>
<option value="premium">
Premium
</option>
</select>
</p>
<p>Click the button below to
remove one option from the select box.</p>
<button onclick="removeOption()">
Remove option
</button>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script type="text/javascript">
function removeOption() {
/* select the option with the
value of basic and remove the option*/
$("#select1 option[value='basic']").remove();
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: Usar el método find()
El método find() se puede usar para encontrar la opción en el valor con el selector de valor. Este método busca a través de los descendientes de los elementos especificados en el DOM y crea un nuevo objeto jQuery a partir de los elementos coincidentes.
Primero se selecciona el cuadro de selección y luego se aplica el método find() con el selector de valor para encontrar la opción. A continuación, se utiliza el método remove() para eliminar esta opción seleccionada.
Sintaxis:
$('selectBox').find('[value="basic"]').remove()
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Removing an item from a select box
</title>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>
Removing an item from a select box
</b>
<p>
Select one from the given options:
<select id="select1">
<option value="free">
Free
</option>
<option value="basic">
Basic
</option>
<option value="premium">
Premium
</option>
</select>
</p>
<p>
Click the button below to remove
one option from the select box.
</p>
<button onclick="removeOption()">
Remove option
</button>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script type="text/javascript">
function removeOption() {
/* select the option with the
value of basic and remove the option*/
$('#select1').find('[value="basic"]').remove();
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA