I am developing an ASP .Net MVC 3 application using C# and SQL Server 2005.

In a view, I have a DropDownList, a button.

How can I remove an item from the DropDownList for each click of the button.

I try to use javascript, but I think that's not working because when I click on the button, nothing happens.

This is the code :

<%:Html.Label("Poste :")%>
<%:Html.DropDownListFor(
    model => model.SelectedPoste,
    Model.PostesItems,
    new { @id = "poste" })%>

<div>
    <input type="submit"
           value="Enregistrer"
           id="btnSave"
           onclick="remove()" />
</div>

<script type="text/javascript">    
    function remove() {
        var rm = document.getElementById('btnSave');
        var poste = document.getElementById('poste');

        poste.removeItem(); 
    }
</script>

I am developing an ASP .Net MVC 3 application using C# and SQL Server 2005.

In a view, I have a DropDownList, a button.

How can I remove an item from the DropDownList for each click of the button.

I try to use javascript, but I think that's not working because when I click on the button, nothing happens.

This is the code :

<%:Html.Label("Poste :")%>
<%:Html.DropDownListFor(
    model => model.SelectedPoste,
    Model.PostesItems,
    new { @id = "poste" })%>

<div>
    <input type="submit"
           value="Enregistrer"
           id="btnSave"
           onclick="remove()" />
</div>

<script type="text/javascript">    
    function remove() {
        var rm = document.getElementById('btnSave');
        var poste = document.getElementById('poste');

        poste.removeItem(); 
    }
</script>

• c#
• javascript
• visual-studio-2010
• asp-mvc-3

• Can you confirm that the HTML generated from your Html.DropDownListFor actually has an ID of "poste" and not "SelectedPoste" ? – Matt Houser Commented May 23, 2013 at 19:01
• yes,,i tried that with other JS code but to disable a dropdownlist and it s worked – anouar Commented May 23, 2013 at 19:08
• May I post an answer that uses jQuery library? It would make this much easier. – Andre Calil Commented May 23, 2013 at 19:09

4 Answers 4

using jQuery

<select id="poste">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<br />

<input type="button" id="btnSave" value="Remove current item" />

<script type="text/javascript">
    $(function () {
        $('#btnSave').click(function () {
            $('#poste option:selected').remove();
            return false;
        });
    });
</script>

EDIT: binding the click event using jQuery

1. The generated HTML will give the select element an ID of "SelectedPoste", not "poste" as you are attempting to set.

2. Use remove to remove an item.

Change your javascript to be:

var poste = document.getElementById('SelectedPoste');

poste.remove(poste.selectedIndex); 

Edit: The generated HTML for the select will be:

<select id="poste" name="SelectedPoste">...</select>

Either of these two lines will get that elements:

var poste = document.getElementById('poste');

or

var poste = document.getElementById('SelectedPoste');

(Atleast in IE10)

Then to remove the selected item from the list, do:

poste.remove(poste.selectedIndex);

This does not remove the button :)

Edit 2: Like Dimitar's answer, you need to change your function name from remove to something else.

Once you do that, my code above works in IE and Chrome.

Using vanilla JavaScript you can do:

<script type="text/javascript">    
    function removeOption() {
       var posteElement = document.getElementById('poste');        
       var currentIndex = posteElement.selectedIndex;

       posteElement.removeChild(posteElement[currentIndex]);
       return false;
    }
</script>

That's all you need. Also make sure you rename your function to anything other than remove():

<input type="submit"
       value="Enregistrer"
       id="btnSave"
       onclick="removeOption()" />

Check out this (not very nice inline-fiddle).

However I'd strongly suggest at least looking into a library such as jquery, (this would be much easier than with vanilla.js). Check out Andre's answer.

Try this:

$("#poste option[value='X']").each(function() {
    $(this).remove();
});

Or to be more terse, this will work just as well:

$("#poste option[value='X']").remove();

Example:

$("#btnSave").click(function(){
   $("#poste option[value='X']").remove();
});

Remember to use JQuery :)