Programming Tutorials

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

By: Emiley J. Printer Friendly Format    

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.

friends - group test - group java-samples.com - group m-indya - group
Click on name to remove from recipient list