Localstorage irrécupérable depuis un .click

Bonjour, je débute en jquery et pour m'entrainer un peu j'ai décidé de créer quelques pages permettant de stocker des articles en localstorage.
Sur ce code l'article est enregistré puis affiché sans soucis, mais je voudrais aussi que chaque article dispose d'un bouton pour le supprimer.
Seulement je n'arrive pas à supprimer l'article du localstorage au click sur le bouton.
Affichage de l'article:

var testLocalStorage = localStorage.getItem('mes-articles');
	if (testLocalStorage) {
		listeArticles = JSON.parse(testLocalStorage);	
        }

	for (var i = 0, nbArticles = listeArticles.length; i < nbArticles; i++){
		var html = "";
		html += '<div id="section'+i+'"class="section erase">';
		html += 	'<h2>' + listeArticles[i].title + '</h2>'
		html +=  '<p>' + listeArticles[i].content + '</p>';
		html += '<img class="img-dynamique" src="' + listeArticles[i].img + '"/>';
		html +=	'<button type="submit" id="submit'+i+'">supprimer</button>';
		html += '</div>';

              $('.articles').append(html);

Bouton censé supprimer l'article:

        var submit = "#submit" + i;
        var section = "#section" + i;

	$(submit).click(function(){
		$(this).parents(".erase").slideUp();
		alert(listeArticles[i].title);
	});	

Là j'ai juste mis un alert parce que déjà je voudrais avoir accès à l'article pour le supprimer ensuite et cela me retourne toujours "undifined". alors que si je le met au dessus du "$(submit) le titre s'affiche.

(Si vous avez d'autres conseils pour améliorer ce code hésitez pas ! )
Modifié par Eringer (10 Jan 2018 - 22:35)

Pour supprimer des éléments dans le localstorage il faut utiliser .clear() ou alors faire une .removeItem('ton item');

Salut ton problème d'affichage est dû à la portabilité des variables...

Le js est particulier là dessus

du coup vu que tu appelles listeArticles dans une fonction la variable n'est pas connue

2 solutions :

Soit tu refais un getItem dans la fonction soit tu passes ta variable en argument de la fonction

pchlj a écrit :
du coup vu que tu appelles listeArticles dans une fonction la variable n'est pas connue

Je pense plutôt que le problème vient de l'indice "i". La variable "listeArticles" me semble par contre devoir exister et être visible au moment de l'exécution du alert().

La fonction de callback function(){ $(this).parents(".erase").slideUp(); alert(listeArticles[ i ].title); } est a priori exécutée en différé, donc une fois que l'exécution de la boucle est terminée et que "i" vaut "nbArticles". Or listeArticles[nbArticles] est indéfini.

Fais un alert(i) pour vérifier ce point. Si je ne me trompe pas, "i" vaudra "nbArticles" dès la première alert().

Amicalement,
Modifié par parsimonhi (11 Jan 2018 - 10:46)

Oups bien vu parsimonhi

en effet i n'est pas connu

pour ma part j'utiliserai un data-value=i sur le bouton submit pour pouvoir le récupérer dans al fonction ensuite

pchlj a écrit :
en effet i n'est pas connu

Je dirais plutôt qu'il est défini mais qu'il n'a pas la valeur attendue au moment de l'exécution de la fonction.

Ceci étant, on n'a qu'une partie du code. En particulier, on ne sait pas où se finit la boucle for (var i=...). En l'état, on ne peut que faire des suppositions.

Amicalement,

parsimonhi a écrit :


Je pense plutôt que le problème vient de l'indice "i". La variable "listeArticles" me semble par contre devoir exister et être visible au moment de l'exécution du alert().

La fonction de callback function(){ $(this).parents(".erase").slideUp(); alert(listeArticles[ i ].title); } est a priori exécutée en différé, donc une fois que l'exécution de la boucle est terminée et que "i" vaut "nbArticles". Or listeArticles[nbArticles] est indéfini.

Fais un alert(i) pour vérifier ce point. Si je ne me trompe pas, "i" vaudra "nbArticles" dès la première alert().

Amicalement,

Le soucis venait bel et bien de la variable i qui dès le premier tour de boucle était à 1 et non à 0 donc je ne pouvais pas accéder au premier article à l'indice 0. Et oui la variable i existe puisque présente dans la boucle

             alert(listeArticles[i-1]);

Je cherche maintenant un moyen de supprimer uniquement l'article et je ne peux utiliser removeItem("mes-articles") puisqu'il contient un tableau d'objets de tout mes articles

Alors si tu as retrouvé i

maintenant tu peux faire une boucle sur le tableau, tu recrée dans cette boucle un nouveau tableau, où si la clé est égale à i tu ne met pas l'article dans le tableau, puis à la fin tu remet ton tableau à jour dans le localStorage

for(x in liste){
 if(x != i) newArray[x]= liste[x];
}
localStorage.setItem('mes-articles', newArray);

j'ai pas testé c'est pour illustrer ma réponse