Question basique js

Bonjour,

Je débute le Javascript. Il y a un problème que je n'arrive pas à résoudre...
Je souhaite créer un tableau, avec la possibilité à chaque ligne de supprimer la valeur durée.

Voici mon code html :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<span id="add" class="glyphicon glyphicon-plus"></span> <table class='table table-striped table-hover table-condensed'> <thead> <tr> <th> activité </th> <th> Durée </th> <th> Commentaire </th> <th> Supprimer </th> </tr> </thead> <tbody> <tr> <td> Rugby </td> <td> <input id="duration"> 60 </td> <td> ras </td> <td><span id="delete" class="glyphicon glyphicon-trash"></span></td> </tr> </tbody> </table>

---

En javascript :

Code:

---

1 2 3 4 5 6 7 8

$(function() { $( "#add" ).click(function(){ $( "table tbody" ).append('<tr><td>test</td><td><input id="duration" style="max-width:30px;"></td><td><input></input></td><td><span class="glyphicon glyphicon-trash" id="delete"></span></td></tr>'); }); $( "#delete").click(function(){ $(this).parent().parent().find('#duration').val(""); }); });

---

Mon problème est le suivant : la ligne que j'ai créée par défaut dans mon html se supprime correctement, en revanche, si j'ajoute une nouvelle ligne en cliquant sur mon span "add", lorsque je tente de la supprimer, il ne se passe rien, je ne rentre jamais dans la fonction "$( "#delete").click(function(){" ci-dessus.

Merci beaucoup pour votre aide, bonne soirée ! :)

Ah ben ça tombe bien : Comprendre la délégation d'événement en JavaScript.
Voir aussi : http://api.jquery.com/on/#direct-and-delegated-events.

Bonjour,
il serait bon également que les ID de tes éléments soient UNIQUE, rien ne t'empêches de passer par une classe.

Merci beaucoup je vais lire ça :)
----------
EDIT : Super, c'est résolu :)