Hi,
I am trying to add rows and remove rows from a table using javascript and I have managed to get somewhere adding rows using the below code

Code:
function insRow(rowIndex)
{
 var results = document.booking.stopoff.value; 
 if(rowIndex == null)rowIndex = 0;

 
 //1 stop off.
 if(results == '1s')
 	{
 		var x=document.getElementById("test").insertRow(rowIndex)
 		var a=document.getElementById("test").insertRow(rowIndex+1)
 		var y=x.insertCell(0)
 		var z=x.insertCell(1)
 		var b=a.insertCell(0)
 		var c=a.insertCell(1)
		y.innerHTML="<span class=\"text\"><div align=\"right\">Reason for stop:</div></span>"
 		z.innerHTML="<span class=\"text\"><div align=\"left\"><input name=\"reason_s1\" type=\"text\" class=\"text\"  value=\"e.g. pick up keys for apartment.\" size=\"35\"></div></span>"
	 	b.innerHTML="<span class=\"text\"><div align=\"right\">Address of stop:</div></span>"
 		c.innerHTML="<span class=\"text\"><div align=\"left\"><textarea name=\"address_s1\" cols=\"30\" rows=\"4\" class=\"text\" id=\"address[]\"></textarea></div></span>"
	}
 if(results == '1r')
 	{
 		var x=document.getElementById("test").insertRow(rowIndex)
 		var a=document.getElementById("test").insertRow(rowIndex+1)
 		var y=x.insertCell(0)
 		var z=x.insertCell(1)
 		var b=a.insertCell(0)
 		var c=a.insertCell(1)
		y.innerHTML="<span class=\"text\"><div align=\"right\">Reason for return stop:</div></span>"
 		z.innerHTML="<span class=\"text\"><div align=\"left\"><input name=\"reason_s2_1\" type=\"text\" class=\"text\" value=\"e.g. pick up keys for apartment.\" size=\"35\"></div></span>"
	 	b.innerHTML="<span class=\"text\"><div align=\"right\">Address of return stop:</div></span>"
 		c.innerHTML="<span class=\"text\"><div align=\"left\"><textarea name=\"address_s2_1\" cols=\"30\" rows=\"4\" class=\"text\" id=\"address[]\"></textarea></div></span>"
		var x=document.getElementById("test").insertRow(rowIndex)
 		var a=document.getElementById("test").insertRow(rowIndex+1)
 		var y=x.insertCell(0)
 		var z=x.insertCell(1)
 		var b=a.insertCell(0)
 		var c=a.insertCell(1)
		y.innerHTML="<span class=\"text\"><div align=\"right\">Reason for stop:</div></span>"
 		z.innerHTML="<span class=\"text\"><div align=\"left\"><input name=\"reason_s2_2\" type=\"text\" class=\"text\" value=\"e.g. pick up keys for apartment.\" size=\"35\"></div></span>"
	 	b.innerHTML="<span class=\"text\"><div align=\"right\">Address of stop:</div></span>"
 		c.innerHTML="<span class=\"text\"><div align=\"left\"><textarea name=\"address_s2_2\" cols=\"30\" rows=\"4\" class=\"text\" id=\"address[]\"></textarea></div></span>"
		
	}

 if(results == '2s')
 	{
 		var x=document.getElementById("test").insertRow(rowIndex)
 		var a=document.getElementById("test").insertRow(rowIndex+1)
 		var y=x.insertCell(0)
 		var z=x.insertCell(1)
 		var b=a.insertCell(0)
 		var c=a.insertCell(1)
		y.innerHTML="<span class=\"text\"><div align=\"right\">Reason for stop 2:</div></span>"
 		z.innerHTML="<span class=\"text\"><div align=\"left\"><input name=\"reason_2s_1\" type=\"text\" class=\"text\" value=\"e.g. pick up keys for apartment.\" size=\"35\"></div></span>"
	 	b.innerHTML="<span class=\"text\"><div align=\"right\">Address of return stop:</div></span>"
 		c.innerHTML="<span class=\"text\"><div align=\"left\"><textarea name=\"address_2s_1\" cols=\"30\" rows=\"4\" class=\"text\" id=\"address[]\"></textarea></div></span>"
		var x=document.getElementById("test").insertRow(rowIndex)
 		var a=document.getElementById("test").insertRow(rowIndex+1)
 		var y=x.insertCell(0)
 		var z=x.insertCell(1)
 		var b=a.insertCell(0)
 		var c=a.insertCell(1)
		y.innerHTML="<span class=\"text\"><div align=\"right\">Reason for stop 1:</div></span>"
 		z.innerHTML="<span class=\"text\"><div align=\"left\"><input name=\"reason_2s_2\" type=\"text\" class=\"text\" value=\"e.g. pick up keys for apartment.\" size=\"35\"></div></span>"
	 	b.innerHTML="<span class=\"text\"><div align=\"right\">Address of stop:</div></span>"
 		c.innerHTML="<span class=\"text\"><div align=\"left\"><textarea name=\"address_2s_2\" cols=\"30\" rows=\"4\" class=\"text\" id=\"address[]\"></textarea></div></span>"
		
	}
}
I fire this from an onchange event from a select box, this works to an extend in so far that every time i change the select box it adds the required number of rows to the table.
My question is though, everytime the onchange event fires I want to remove the previous number of rows from the table. For instance I initaly select 3 rows to be inserted and change my mind to 2 how do i remove the first 3 rows before I add 2?

Hope thats clear.
Thanks
Chris