Discussion :

[leom4t]

Bonjour tout le monde.
Je suis sur un projet, mais malheureusement je bloque pour un détail.
Clairement, j'aimerais avoir une liste de <li>, avec, pour chaque <li> un lien pour supprimer celle ci, de façon dynamique.

Visuellement, ça donnerait ceci.

Pour mon Html, le voici.
HTML :

Code :

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

1
2
3
4
5
<ol start="1" id="stops_list" name="stops_list">
    <li>Arret 1<a href=javascript:??></a></li>
    <li>Arret 2<a href=javascript:??></a></li>
    <li>Arret 3<a href=javascript:??></a></li>
</ol>

Mais je ne sais pas comment implémenter une fonction javascript qui arriverait à supprimer l'élement voulu.

[javatwister]

je ne vois pas bien l'esprit du projet mais bon:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
 
var liste=document.getElementById("stops_list").getElementsByTagName("li");
 
for(li in liste){
	liste[li].onclick=function(){
		this.parentNode.removeChild(this)
	}
}
 
</script>

[leom4t]

Ok ça fonctionne, mais là en fait, ça supprime le li en cliquant dessus, alors que ce n'est pas un lien. J'aimerais utiliser le lien qu'il y a à côté pour la suppression.
De plus, le li prend toute la largeur de la page, alors si on clique sur le bord droit de la page involontairement, ça supprime quand même.
Une image pour mieux comprendre :



Je suis pointilleux je sais, mais c'est à vocation professionnelle, alors je préfère ne rien laisser au hasard^^

N'est-il pas possible de procéder comme ceci?

Code :

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

1
2
3
4
 
<li id="1">
    <a href=# onclick=deleteElement(1)>Delete this</a>
</li>

Avec une fonction javascript

Code :

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

1
2
3
4
 
function deleteElement(id){
        ??
}

[javatwister]

adapte juste en prenant les liens comme déclencheur d'événements:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
 
var liens=document.getElementById("stops_list").getElementsByTagName("a");
 
for(li in liens){
	liens[li].onclick=function(){
		this.parentNode.parentNode.removeChild(this.parentNode);
		return false
	}
}
 
</script>

[leom4t]

Fonctionne à merveille.

Prochaine fois je commencerai par un peu de théorie avant de me lancer directement dans la pratique^^

Merci en tous cas