dynamiquement supprimer des éléments de formulaire à l'aide de javascript

Je veux supprimer dynamiquement des éléments de formulaire à l'aide de javascript.
Le code ci-dessous est simple et ajoute dynamiquement des éléments de formulaire.

Ma forme ressemble (désolé, essayé de le faire fonctionner dans jsfiddle, mais ne pouvait pas. Fonctionne bien sur mes propres serveurs tout de même):

"prénom" "nom" "âge"

Ajouter plus de données (bouton) Soumettre (bouton)

Si vous cliquez sur Ajouter des données supplémentaires que vous obtenez

"prénom" "nom" "âge"

"prénom" "nom" "âge" "supprimer (bouton)"

Ajouter plus de données (bouton) Soumettre (bouton)

J'enregistre chaque nouvelle ligne via fooID+x+i.
Par exemple la première fois que vous ajoutez un élément de formulaire "premier nom" serait référencé en tant que "foo10", "nom de famille" sera "foo11" et ainsi de suite.

Comment puis-je résoudre le ci-dessous pour supprimer dynamiquement des éléments de formulaire qui sont en train d'être cliqué pour être retiré?

<script language="javascript">
function removeRow(r)
{
/*********************
Need code in here
*********************/
}
</script>

var x = 1;

function add() {
var fooId = "foo";

for (i=1; i<=3; i++)
  {
    //Create an input type dynamically.
    var element = document.createElement("input");

    //Assign different attributes to the element.
    element.setAttribute("type", fooId+x+i);
    element.setAttribute("name", fooId+x+i);
    element.setAttribute("id", fooId+x+i);

    if(i==1){
           element.setAttribute("value", "First name");
     }
    if(i==2){
          element.setAttribute("value", "Last name");

    }
    if(i==3){
        element.setAttribute("value", "age");

    }          
    var foo = document.getElementById("fooBar");
    foo.appendChild(element);
    foo.innerHTML += ' ';

}
        i++;            
            var element = document.createElement("input");
element.setAttribute("type", "button");
element.setAttribute("value", "Remove");
element.setAttribute("id", fooId+x+i);
element.setAttribute("name", fooId+x+i);    
element.setAttribute("onclick", "removeRow(this)");
foo.appendChild(element);

  var br = document.createElement("br");
foo.appendChild(br);

x++;

}
</SCRIPT>

<body>
<center>

<form id="form" name="form" action="test.php" method="post" enctype="multipart/form-data">

<input type="text" id="foo01" name="foo01" value="first name"> 

<input type="text" id="foo02" name="foo02" value="last name"/>  
<input type="text" id="foo03" name="foo03" value="age"> 
<br>
<span id="fooBar"></span>

<FORM>

<INPUT type="button" value="Add more data" onclick="add()"/>
<input type="submit" value="Submit">
</center>
</FORM>

</form>

</body>
Pourquoi vous incluez une FORM élément dans un autre?

OriginalL'auteur user2484214 | 2013-08-22