How to remove options from select element using jQuery ?

21 Jun, 2019
The task is to remove the option elements from the select element using jQuery.
Approach:
Select the option from select which needs to remove.
Use JQuery remove() method to remove the option from the HTML document.
Example 1: This example removes the option of which val = ‘val_1’ using remove() method.
<!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>
Output:
Before reaching the bottom:
After reaching the bottom:
Example 2: This example removes the options of which class = ‘val’ using remove() method.
<!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>
Output:
Before reaching the bottom:
After reaching the bottom:
JavaScript-Misc
jQuery-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Differences between Functional Components and Class Components in React
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?