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

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 value="10010 - group">
test - group

<option value="10011 - group"> - group

<option value="10012 - group">
m-indya - group
<small><span class="bodytext">Click on name to remove from recipient list</span><br></small><br>

For step 2. 

Add the following function in your html page.

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



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