Есть форма типа:
<form method="GET" action="#">
Name:
<br>
<div id="colName">
<div id="name1">
1.<input id="col_name[1]" name="col_name[1]" type="text" />
<a onclick="return deleteField()" href="#">[X]</a>
</div>
</div>
Data:
<br>
<div id="colVal">
<div id="val1">
1.<input id="col_val[1]" name="col_val[1]" type="text" />
</div>
</div>
<input class="s" type="submit" value="GO!" />
</form>
<a onclick="return addField()" href="#">Добавить поля</a>

Нужно чтобы при нажатии на ссылку "Добавить поля" добавлялось по одному полю в Name и Data, а при нажатии на ссылку "[X]" эти оба поля удалялись.
С JavaScript имею дело впервые, пока только получилось написать функцию на добавление полей:
<script>
var countOfFields = 1; // Текущее число полей
var maxFieldLimit = 30; // Максимальное число возможных полей
function deleteField() {
}

function addField() {
if (countOfFields >= maxFieldLimit) {
alert("Число полей достигло своего максимума = " + maxFieldLimit);
return false;
}
countOfFields++;

var name = document.createElement("div");
var val = document.createElement("div");
name.innerHTML = + countOfFields + ".<input name=\"col_name[" + countOfFields + "]\" type=\"text\" /> <a onclick=\"return deleteField()\" href=\"#\">[X]</a>";
val.innerHTML = countOfFields + ".<input name=\"col_val[" + countOfFields + "]\" type=\"text\" />";
document.getElementById("colName").appendChild(nam e);
document.getElementById("colVal").appendChild(val) ;
return false;
}
</script>
Написать функцию на удаление что-то не получаеться.
Зарание спасибо.