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

By: Emiley J. Viewed: 153199 times  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.


Click on name to remove from recipient list



Most Viewed Articles (in Javascript )

Latest Articles (in Javascript)

Comment on this tutorial