How to Add and Remove Multiple or Single Select Options using jQuery

There are some useful and interesting methods provided by jQuery that help remove or add options in the select element. You can either remove all the options or remove just a single one, as well as, you can add multiple options or remove all them and add new options. Let’s discuss all of the scenarios and to give solutions.

The find() method finds the <option> tags in the <select> element. Then the remove() method removes all the options in the select element:

Watch a course JavaScript -The Complete Guide (Beginner + Advanced) 

$(document).ready(function () {
  $("#submit").click(function () {
    $('#selBooks')
      .find('option')
      .remove();
  });
});

Here is the full example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  </head>
  <body>
    <select id="selBooks" name="books" style="font:14px Verdana;">
      <option value="html">HTML Book</option>
      <option value="git">Git Book</option>
      <option value="javascript">JavaScript Book</option>
      <option value="css">CSS Book</option>
    </select>
    <input type="submit" id="submit" value="Remove All" />
    <script>
      $(document).ready(function() {
          $("#submit").click(function() {
              $('#selBooks').find('option').remove();
            });
        });
    </script>
  </body>
</html>

To remove a specific option from the list use the remove() method specifying the name of the option:

<!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">
    <select>
      <option value="css"> Css book</option>
      <option value="javascript"> Javacript book</option>
      <option value="git"> Git book</option>
      <option value="html"> Html book</option>
    </select>
    <button> Remove </button>
    <script>
      $('button').on('click', function() {
          $("option[value='css']").remove();
        });
    </script>
  </body>
</html>

To keep a specific option in the list and remove the rest use the above statement with a not equal to(!=) sign:

<!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">
    <select>
      <option value="javascript"> Javacript book</option>
      <option value="css"> Css book</option>
      <option value="git"> Git book</option>
      <option value="html"> Html book</option>
    </select>
    <button> Remove </button>
    <script>
      $('button').on('click', function() {
          $("option[value='css']").remove();
        });
      $('button').on('click', function() {
          $('option[value="javascript"]').remove();
        });
    </script>
  </body>
</html>

To add new options use the append() method to add a new option at the end of the list:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  </head>
  <body>
    <select id="selBooks" name="books" style="font:14px Verdana;">
      <option value="html">HTML Book</option>
      <option value="git">Git Book</option>
      <option value="javascript">JavaScript Book</option>
      <option value="css">CSS Book</option>
    </select>
    <input type="submit" id="submit" value="Append" />
    <script>
      $(document).ready(function() {
          $("#submit").click(function() {
              $('#selBooks').append('<option value="php">PHP Book</option>')
            });
        });
    </script>
  </body>
</html>

To add new option after clearing all the previous option, use the following code piece:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  </head>
  <body>
    <select id="selBooks" name="books" style="font:14px Verdana;">
      <option value="html">HTML Book</option>
      <option value="git">Git Book</option>
      <option value="javascript">JavaScript Book</option>
      <option value="css">CSS Book</option>
    </select>
    <input type="submit" id="submit" value="Append" />
    <script>
      $(document).ready(function() {
          $("#submit").click(function() {
              $('#selBooks').append('<option value="php">PHP Book</option>')
            });
        });
    </script>
  </body>
</html>

The remove() method removes the options, the end() takes the object back to the beginning of the script, and the append() method adds new options in the list.