How to remove options from select element using jQuery ?

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. 

html

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<h1 style="color:green;">
    GeeksForGeeks
</h1>
<p id="GFG_UP">
</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>

Output:

How to remove options from select element using jQuery ?

Example 2: This example removes the options of which class = ‘val’ using remove() method. 

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<h1 style="color:green;">
    GeeksforGeeks
</h1>
<p id="GFG_UP">
</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>

Output:

How to remove options from select element using jQuery ?