La tarea es eliminar los elementos de opción del elemento seleccionado usando jQuery.
Acercarse:
- Seleccione la opción de selección que necesita eliminar.
- Utilice el método JQuery remove() para eliminar la opción del documento HTML.
Ejemplo 1: Este ejemplo elimina la opción de la cual val = ‘val_1’ usando el método remove() .
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery | Remove options from select.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"
style="font-size: 15px;
font-weight: bold;">
</p>
<select>
<option value="val_1"> Val_1</option>
<option value="val_2"> Val_2</option>
<option value="val_3"> Val_3</option>
<option value="val_4"> Val_4</option>
</select>
<br>
<br>
<button>
click here
</button>
<p id="GFG_DOWN"
style="color: green;
font-size: 24px;
font-weight: bold;">
</p>
<script>
$('#GFG_UP').text(
'Click on the button to '+
'remove a option from select');
$('button').on('click', function() {
$("option[value='val_1']").remove();
$('#GFG_DOWN').text(
'option with val_1 is removed!');
});
</script>
</body>
</html>
Producción:
- Antes de llegar al fondo:
- Después de llegar al fondo:
Ejemplo 2: Este ejemplo elimina las opciones de which class = ‘val’ usando el método remove() .
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery | Remove options from select.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;"
id="body">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"
style="font-size: 15px;
font-weight: bold;">
</p>
<select>
<option class="val" value="val_1">
Val_1
</option>
<option class="val" value="val_2">
Val_2
</option>
<option value="val_3">
Val_3
</option>
<option value="val_4">
Val_4
</option>
</select>
<br>
<br>
<button>
click here
</button>
<p id="GFG_DOWN"
style="color: green;
font-size: 24px;
font-weight: bold;">
</p>
<script>
$('#GFG_UP').text(
'Click on the button to remove a option from select');
$('button').on('click', function() {
$("option[class='val']").remove();
$('#GFG_DOWN').text(
'option with class = "val" are removed!');
});
</script>
</body>
</html>
Producción:
- Antes de llegar al fondo:
- Después de llegar al fondo:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA