Hello all! I am having a problem with a little loop and was wondering if anone could exsplain what my problem is?

Code:
<html>
<head>
<script>
var dp=false;
function getDrives(frm)
	{
	var drvs, drv, fObj=new ActiveXObject("Scripting.FileSystemObject");
	drvs=new Enumerator(fObj.Drives);
	   if(!dp)
	   {
		for(;!drvs.atEnd();drvs.moveNext())
		{
			drv=drvs.item();
				if(drv.IsReady)
				{
		 			var opt=document.createElement("option");
					var txt=document.createTextNode(drv.DriveLetter+":"+drv.VolumeName);
					opt.setAttribute("name",drv.DriveLetter);
					opt.setAttribute("value",drv.DriveLetter+":\\");
					opt.appendChild(txt);
			 		frm.appendChild(opt);
				}	
				else{
					var opt=document.createElement("option");
					var txt=document.createTextNode(drv.DriveLetter+": (No Disk)");
					opt.setAttribute("name",drv.DriveLetter);
					opt.setAttribute("value",drv.DriveLetter+":\\");
					opt.appendChild(txt);
			 		frm.appendChild(opt);
				}
		dp=true;
		}
	   }
	}

function clr(frm)
	{
		for(i=0;i<frm.options.length;i++)
		{
			frm.removeChild(frm.options[i]);
		}
	}

</script>
</head>
<body>
<form name="theFrm">
<table>

<tr>	
	<td>
	<input type="button" value="Get Drives" onclick="getDrives(this.form.theDrives)" style="width:125;"><br>
	<select name="theDrives" size="10" style="width:125;"> 
	</select>
	<input type="button" value="Clear" onclick="clr(this.form.theDrives)" style="width:125;"><br>
	</td>
</tr>

</table>
</form>
</body>
</html>
The function I have highlighted is causing the problem! Basically I just want it to remove all the options and leave an empty select box! But when I click the button it removes the first three then one more each time you click it after that! I just want it to remove all of the children of the select box with one click! Am I doing it the wrong way or asking for to much! I am baffled by this problem?