ajout d'evenement à un noeud créé

Bonjour,
J'ai une page dans laquelle il y a un titre "appuyez la"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
     <head>
          <title>TD : verifier les champs</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <script type="text/javascript" src="j.js"></script>
     </head>
 
     <body>
<div id="identifiant1">
<h1 onclick="javascript:verifier();">appuyez là</h1>
 
<fieldset id="champs">
<form id="identifiant" action="page.php" onsubmit="return verifier(document.getElementById('monForm'));">
 </form>
 </fieldset>
 
</div>
 
     </body>
</html>

Je veux que javascript detecte chaque click de souris sur le titre et rajoute par la suite un label, un champ input et un lien sur la meme ligne.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
function verifier()
    {
        var corps = document.getElementById("identifiant");
 
        var champCree = document.createElement("input"); //creer un champ de saisie nommé "champCree"
        var saut = document.createElement("br");   // saut est le retour à la ligne
        var label = document.createElement("label");  // label est la balise </label>
        var lien = document.createElement("a");  // creer un lien de suppression de champs
        var texteLien = document.createTextNode("supprimer");
        lien.appendChild(texteLien);
 
        lien.setAttribute("href","#");
 
        if(document.all)
        {
            lien.attachEvent("onclick",supprimer);
        }
        else
        {
            lien.addEventListener("click",supprimer,true);
        }
 
        champCree.setAttribute("class","monChamp");
        var tableauChamp = document.getElementsByClassName("monChamp");
        var nbreChamp = tableauChamp.length;
 
        if((nbreChamp+1)<10)
        {
            var textLabel = document.createTextNode("valeuur"+(nbreChamp+1) );
        }
        else
        {
            var textLabel = document.createTextNode("valeur"+(nbreChamp+1) );
        }
 
 
        label.appendChild(textLabel);
        corps.appendChild(label);
        corps.appendChild(champCree);
        corps.appendChild(lien);
        corps.appendChild(saut);
    }
Je voudrais aussi associer un evenement aux liens crees, a chaque click sur un lien precis toute la ligne de ce lien doit disparaitre.
function supprimer()
    {
        var corps = document.getElementById("identifiant");
        var lienChoisi = (document.all)?event.srcElement:event.target;
        var parent = lienChoisi.parentNode; //place la variable parent sur le noeud parent de node
        var grandParent = parent.parentNode;  //place la variable parent sur le noeud parent de node
        grandParent.removeChild(parent);
    }

Le probleme est qu'un click sur un lien (sous googleChrome) fait que tous les liens et les champs disparaissent sauf le titre initial. Sous FF la suppression ne marche pas carrement et sous IE meme la creation des liens ne marche pas.
Merci d'avance.