Question basique js

**Ludoztw** · 03/06/2015, 17h01

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !