Programming Tutorials

Click to remove an element from a select html form using javascript

By: Emiley J. in Javascript Tutorials on 2008-07-17  

If you are looking for a solution to remove an element from a select list just by clicking on it then obviously you can do it using Javascript. This tutorial explains a step by step solution to this problem.

For this you will need the following.

1. a select list that has a list of items,
2. a javascript that does the trick of removing the element from the list if clicked

For step 1.

Add the following code in your form.

<form name="theform">
    <select title="Select Recipients" style="WIDTH: 247px; HEIGHT: 140px" onclick="getDelete(this);" multiple size="5"
        name="recipients" rows="10" cols="30">
        <option value="10008 - group">
            friends - group
        </option>
        <option value="10010 - group">
            test - group
        </option>
        <option value="10011 - group">
            java-samples.com - group
        </option>
        <option value="10012 - group">
            m-indya - group
        </option>
    </select><br>
    <small><span class="bodytext">Click on name to remove from recipient list</span><br></small><br>
</form>

For step 2. 

Add the following function in your html page.

<script language="javascript" type="text/javascript">
    function getDelete(e) {
        if (e.selectedIndex >= 0) {
            var elSel = document.forms['theform'].recipients;
            var i;
            for (i = elSel.length - 1; i >= 0; i--) {
                if (elSel.options[i].selected) {
                    elSel.remove(i);
                }
            }
        }
    }
</script>

Thats it you are done. You can try this code in your page and it will work as below.