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 of them and add new options. Let’s discuss all of the scenarios and provide solutions.

The <kbd class="highlighted">find()</kbd> method finds the <option> tags in the <select> element. Then the <kbd class="highlighted">remove()</kbd> method removes all the options in the select element:

Javascript jQuery add and remove multiple or single select options

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

Here is the full example:

Javascript jQuery add and remove multiple or single select options

<!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>

Try it Yourself »

To remove a specific option from the list use the <kbd class="highlighted">remove()</kbd> method specifying the name of the option:

Javascript jQuery remove multiple or single select options

<!DOCTYPE HTML>
<html>
  <head>
    <title>
      JQuery | Remove options from select.
    </title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js">
    </script>
  </head>
  <body style="text-align:center;" id="body">
    <select>
      <option value="css"> Css book</option>
      <option value="javascript"> JavaScript 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>

Try it Yourself »

To keep a specific option in the list and remove the rest, use the :not() selector:

Javascript jQuery remove multiple select options

<!DOCTYPE HTML>
<html>
  <head>
    <title>
      JQuery | Remove options from select.
    </title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js">
    </script>
  </head>
  <body style="text-align:center;" id="body">
    <select>
      <option value="javascript"> JavaScript 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() {
          $('select option:not([value="javascript"])').remove();
        });
    </script>
  </body>
</html>

Try it Yourself »

To add new options use the <kbd class="highlighted">append()</kbd> method to add a new option at the end of the list:

Javascript jQuery append options

<!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>

Try it Yourself »

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

Javascript jQuery add new option after clearing all the previous option

<!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').find('option').remove().end().append('<option value="php">PHP Book</option>');
            });
        });
    </script>
  </body>
</html>

Try it Yourself »

The <kbd class="highlighted">remove()</kbd> method removes the options, the <kbd class="highlighted">end()</kbd> takes the object back to the beginning of the script, and the <kbd class="highlighted">append()</kbd> method adds new options in the list.