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