CODEWITHSUNDEEP
javascriptjqueryhtml
Ivan
Ivan

Reputation: 149

Remove the first select option

I'd like to remove the first option of an select tag when I click on the select tag. Is this possible?

example image

I don't want to see the first option after that click.

Thanks for any help.

Upvotes: 3

Views: 32227

Answers (11)

Arhan Ashik
Arhan Ashik

Reputation: 71

You need the id or class to remove the item. While testing and debugging I found 'option:first' fails to remove the item. But 'option:first-of-type' always does the work. You can get more info about 'first-of-type' here :first-of-type

$("#ID_or_.CLASS option:first-of-type").remove();

Upvotes: 0

rajvi
rajvi

Reputation: 150

<select required>
    <option value="" disabled selected hidden>Select your option</option>
    <option value="1">1</option>
</select>

Upvotes: 2

Andrew Foster
Andrew Foster

Reputation: 115

// to remove first...
    document.getElementById("element_id_str").options[0].remove();

//to remove the lot...
    document.getElementById("element_id_str").options.length = 0;

Upvotes: 3

Paul Vergara
Paul Vergara

Reputation: 1

I had the same problem, but the solutions above just work with one form, not with many. I added some extra code in order to validate it for many in your form:

$(document).ready(function()
{
    $(document).on("change","select",function()
    {
        var x =    $(this).children().first().attr("name");
        var n = x.localeCompare("todelete");

        if (n == 0)
            $(this).children().first().remove();
    });
});

Where "todelete" is the name for all first elements [0] defined inside the

Please select value //all first elem must have the same name

"> //the others another name (can be the same BUT not "todelete")

Upvotes: 0

Sos.
Sos.

Reputation: 987

Javascript:

document.getElementById("SelectId")[0].remove();

Get the first option in the select and remove it.

Upvotes: 0

Francisco Castro
Francisco Castro

Reputation: 445

Probably you just want this:

<select required>
    <option value="" hidden>Select your option</option>
    <option value="1">1</option>
</select>

Upvotes: 1

TheFrozenOne
TheFrozenOne

Reputation: 1715

You can remove the first option on click with jQuery.

$(document).on('click', 'select', function() {
   $(this).find('option').get(0).remove();
});

This simply removes the first option of a select tag on click. You need to add an if statement to check if it was already removed.

Upvotes: 11

Kavvson
Kavvson

Reputation: 845

If you use bootstrap add placeholder attribute in your select.

If your not

<select required>
    <option value="" disabled selected>Select your option</option>
    <option value="1">1</option>
</select>

Upvotes: 4

GlabbichRulz
GlabbichRulz

Reputation: 1014

There's also a simple no-javascript solution:

<select>
    <option style="display: none">--Choose--</option>
    <option>Cheese Cake</option>
    <option>Hot Pockets</option>
    <option>Sausage</option>
    <option>Cookies</option>
    <option>Bacon</option>
</select>

(Copied from the comments from @chipChocolate.py)

Upvotes: 11

Shaiful Islam
Shaiful Islam

Reputation: 7134

If you want to remove the first option use this

$(document).ready(function()
    {
       $("select").children().first().remove();           
    });

If you want to remove the first option after clicking on the select box use this 

$(document).ready(function()
{
    var removed=false;       
    $(document).on("click","select",function()
    {
        if(!removed)
        {
            $(this).children().first().remove();
            removed=true;
        }


    });
});

Upvotes: 0

Kroltan
Kroltan

Reputation: 5156

A very naive way of doing this:

$("#selector").change(function(evt) { //listen to changes of selection
  var theElement = $(this);
  if (!theElement.data("selected")) { //check if flag is not set
    theElement.children("option")[0].remove(); //remove 1st child
    theElement.data("selected", true); //set flag, so it doesn't continue removing items for every change
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selector">
  <option>--Choose--</option>
  <option>Apple</option>
  <option>Banana</option>
  <option>Papaya</option>
</select>

Upvotes: 0

Related Questions