Function for removing dynamically items

Question

I have a script like this. How do I continue to add functions : remove items?

JS

counter = 0;
function action() {
  counterNext = counter + 1;
  document.getElementById("input"+counter).innerHTML = "<p><input type='text' name='data[]' class='name'>&nbsp;&nbsp;<a href='#' class='remove'><img src='remove.png' width='20' height='20' border='0' id='remove'/></a></p><div id=\"input"+counterNext+"\"></div>";
  counter++;
}

HTML

<p>
  <input type='text' name='data[]' class='name'>
  <a href="javascript:action();">Add</a>
</p>
<div id="input0"></div>

Can someone help me...

Answer 1

In order to remove items change the following code:

<a href='#' class='remove'>

to:

<a href='#' onclick='this.parentElement.parentElement.removeChild(this.parentElement); return false;' class='remove'>

Example: http://jsfiddle.net/uRLFR/