Suppression d'objet en JS marche à moitié..

**dragonfly** · 28/12/2010, 10h14

Bonjour à tous.

Je viens vers vous car il y'a quelque chose qui m'échappe dans JS, je m'explique.

J'ai créé une fonction qui, en fonction d'une racine d'ID, supprime tous les éléments ayant cette racine dans leur ID. Le probléme c'est que la suppression ne se fait que sur 1 objet sur 2.

Voici mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 var listeDivEnf = document.body.getElementsByTagName(typeS);
	    $j(document).ready(function(){
		for(i = 0; i<listeDivEnf.length ; i++){
			if(listeDivEnf[i].id.match(idS)){
				if (action=="efface"){
			listeDivEnf[i].parentNode.removeChild(listeDivEnf[i]);
				}
			}
 
		}
	     })

En fait dans le if du match, quand je fais un "alert" avec l'ID, je remarque que seulement 1 ID sur 2 est affiché alors que quand je fais l'alert avant ce if, TOUS les ID s'affichent...

Si quelqu'un a une idée

**SpaceFrog** · 28/12/2010, 10h34

y'avait longtemps quel l'on avait pas eu le une fois sur deux avec un match !!

on peut voir ou tu déclares idS ?

l'idéal est de mettre la regexp directement dans le match

le souci provient du fait que le matche provoque un déplacement du pointeur de la regExp

un pansement est de reinitialiser le pointeur de la reg en matchant à vide...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var listeDivEnf = document.body.getElementsByTagName(typeS);
	    $j(document).ready(function(){
		for(i = 0; i<listeDivEnf.length ; i++){
			if(listeDivEnf[i].id.match(idS)){
				if (action=="efface"){
			listeDivEnf[i].parentNode.removeChild(listeDivEnf[i]);
				}
			}
		rien=''
               rien.match(idS)
		}
	     })

**franculo_caoulene** · 28/12/2010, 10h34

Salut,

Code :

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

 $j(document).ready(function(){...

Utilises-tu un framework? Si oui, pourquoi ne pas l'utiliser pleinement en faisant appel directement aux sélecteurs CSS. Tu n'aurais même plus à boucler, si c'est jQuery.

**dragonfly** · 28/12/2010, 10h49

Merci pour vos réponses

idS est declaré ainsi

Code :

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

1
2
3
4
5
 
	var listeObj = new Array('divImage1Vers','divImage2Vers','divImage3Vers','divImage4Vers');
	for(i=0;i<listeObj.length;i++){
		obj.actionGroupe("table",listeObj[i],"efface");
	}

Avec un appel dans la fonction

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
this.actionGroupe = function(typeS, idS, action){
 var listeDivEnf = document.body.getElementsByTagName(typeS);
	    $j(document).ready(function(){
		for(i = 0; i<listeDivEnf.length ; i++){
			if(listeDivEnf[i].id.match(idS)){
				if (action=="efface"){
			listeDivEnf[i].parentNode.removeChild(listeDivEnf[i]);
				}
			}
 
		}
	     })
}

Je ne comprends pas le déplacement du curseur du pointeur, c'est quoi ce probléme?
En fait j'utilise souvent cette fonction (avec d'autres actions, d'ou l'appel à du JQuery), sans avoir ce probléme.

De plus avec mon code plus haut en fait il y'a :

divImage1Vers1 qui est supprimé
divImage1Vers2 qui est ignoré
divImage1Vers3 qui est supprimé
etc...

Je vais voir essayer le réinit du match cet aprém.

P.S : Je n'utilise pas jQuery car je débute en JQuery et pour l'instant je ne l'utilise que pour les trucs qui sont pas faisables en JS "standard".
Aprés si y' un truc en Jquery, je prends

**SpaceFrog** · 28/12/2010, 10h56

Code :

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

1
2
3
4
var listeObj = new Array('divImage1Vers','divImage2Vers','divImage3Vers','divImage4Vers');
	for(i=0;i<listeObj.length;i++){
		obj.actionGroupe("table",new RegExp('^'+listeObj[i]),"efface");
	}

+ le code précédent avec le reste par match sur rien

pour l'explication du pointeur
http://www.developpez.net/forums/d82...script/regexp/

**Bovino** · 28/12/2010, 11h06

Spaffy, il y a aussi l'erreur classique de supprimer un élément de tableau alors qu'on est en train de boucler dessus

En gros, si le tableau à 5 éléments, si tu effaces l'entrée 2, l'occurrence suivante (3) correspondra en fait à l'indice 4 du tableau d'origine

EDIT :

je ne l'utilise que pour les trucs qui sont pas faisables en JS "standard".

Lesquels ???

**SpaceFrog** · 28/12/2010, 11h13

arf yesss Beef

Code :

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

1
2
 
while (elt[0])

ou commencer par la fin et décrémenter

**dragonfly** · 28/12/2010, 11h39

Merci pour vos réponses rapides,

j'essaye cela ce midi en rentrant chez moi.
C'est vrai que le parcours d'élément, je ne voyais pas cela comme un tableau, mais effectivement si il supprime l'élément du tableau y'a décallage et l'élement d'aprés est passé.

Mais histoire de bien comprendre ce qui se passe en fait :

le "while(elt[0])" sert à justement prendre rééllement tous les élements, donc il faut que je le mette à la place du

Code :

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

for(i = 0; i<listeDivEnf.length ; i++){...

Mais du coup le match doit se faire avant de parcourir la liste des solutions possibles (sinon le while ne s'arrête jamais car j'ai des elements qui ne rentrent pas dans le match).

Ou sinon je peut incrémenter un compteur et supprimer l'element comme suis

Code :

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

1
2
 
listeDivEnf[i-cpt].parentNode.removeChild(listeDivEnf[i-cpt]);

ce qui est moins "conventionnel" mais qui est plus rapide

Envoyé par Bovino

EDIT :

Lesquels ???

Des trucs du genre :

Code :

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

1
2
 
if ($j(listeDivEnf[i]).css("display")=="none"){...

Faisable en standard surement mais bcp plus simple via jQuery.

Je test tout ça et je reviens vers vous.
Mille mercis pour vos éclaircissement

(je suis un peu confus aussi car j'ai l'impression que ce probléme arrive assez souvent)

**Bovino** · 28/12/2010, 11h48

Attention, le while(elt[0]) servira pour supprimer tous les éléments listés. Pour n'en supprimer qu'une partie, il faut passer par une boucle inversée :

Code :

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

for(i = listeDivEnf.length - 1; i>=0 ; i--)

Sinon

Code :

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

if ($j(listeDivEnf[i]).css("display")=="none")

s'écrit facilement sans jQuery :

Code :

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

if (listeDivEnf[i].style.display=="none")

**franculo_caoulene** · 28/12/2010, 11h54

Code :

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

$j('div[id^="racine"]').empty();

Je ne sais pas sur quel genre de projet tu travailles. Soit, jQuery est utilisé ailleurs, à ce moment là "tu dois" l'utiliser. Soit il n'est utilisé nulle part ailleurs, à ce moment là supprimes

Code :

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

 $j(document).ready(function(){...

**dragonfly** · 28/12/2010, 12h08

Envoyé par Bovino

Sinon

Code :

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

if ($j(listeDivEnf[i]).css("display")=="none")

s'écrit facilement sans jQuery :

Code :

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

if (listeDivEnf[i].style.display=="none")

En fait ce n'est pas exactement la même chose car le
if (listeDivEnf[i].style.display=="none")
ne raméne rien si il n'est défini QUE dans le CSS mais la version JQuery raméne bien quelque chose. (avant de prendre la version JQuery, j'utilisais ta méthode qui ne fonctionnait pas la "premiére" fois que l'objet passait dans le test).

Franculo_caoulene, le jQuery est bien utilisé autre part (mais pas de rapport avec mon probléme donc je l'ai pas mis...(en fait si CF plus haut)).

Je dois pas être bien OP ce matin, Bovino effectivemment la boucle inversé régle cette partie du probléme assez facilement (je sais pas pourquoi dans ma tête je voyais l'usine à gaz => à tort).

Je test et je reviens vers vous en début d'aprém.

Bon ap'

**dragonfly** · 28/12/2010, 14h03

Re bonjour,

avec simplement

Code :

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

for(i = listeDivEnf.length - 1; i>=0 ; i--)

le probléme a totalement disparu.
Je n'ai pas eu besoin de modifier le regexp.

Merci beaucoup pour vos réponses rapides et ô combien utile

Bonnes fêtes

**dukej** · 28/12/2010, 15h09

Envoyé par dragonfly

Merci pour vos réponses rapides,

j'essaye cela ce midi en rentrant chez moi.
C'est vrai que le parcours d'élément, je ne voyais pas cela comme un tableau, mais effectivement si il supprime l'élément du tableau y'a décallage et l'élement d'aprés est passé.

Mais histoire de bien comprendre ce qui se passe en fait :

le "while(elt[0])" sert à justement prendre rééllement tous les élements, donc il faut que je le mette à la place du

Code :

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

for(i = 0; i<listeDivEnf.length ; i++){...

Mais du coup le match doit se faire avant de parcourir la liste des solutions possibles (sinon le while ne s'arrête jamais car j'ai des elements qui ne rentrent pas dans le match).

Ou sinon je peut incrémenter un compteur et supprimer l'element comme suis

Code :

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

1
2
 
listeDivEnf[i-cpt].parentNode.removeChild(listeDivEnf[i-cpt]);

ce qui est moins "conventionnel" mais qui est plus rapide

Des trucs du genre :

Code :

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

1
2
 
if ($j(listeDivEnf[i]).css("display")=="none"){...

Faisable en standard surement mais bcp plus simple via jQuery.

Je test tout ça et je reviens vers vous.
Mille mercis pour vos éclaircissement

(je suis un peu confus aussi car j'ai l'impression que ce probléme arrive assez souvent)

En fait pour mieux comprendre la chose et ça éclaircira tous les esprits :
quand tu fais un

Code :

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

var div = machin.getElementsByTagName('div');

tu récupères div, mais div n'est pas un tableau mais une "nodelist", et une nodelist est dynamique, ce qui signifie que si tu supprimes un div à l'intérieur de "machin", alors la nodelist "div" voit son nombre diminuer. Et du coup l'index de tes divs est décaler aussi.

J'espère avoir été assez clair. Si plus d'infos demandez moi

**danielhagnoul** · 28/12/2010, 21h59

Bonsoir

Envoyé par franculo_caoulene

Salut,

Code :

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

 $j(document).ready(function(){...

Utilises-tu un framework? Si oui, pourquoi ne pas l'utiliser pleinement [...]

Où : Pourquoi faire simple lorsque l'on peut faire très compliqué !

Code :

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
20
21
22
23
24
// sauf erreur de ma part, le code qui suit se résume à un simple :
$("div[id^='divImage']").remove();
 
/*
var listeObj = new Array('divImage1Vers','divImage2Vers','divImage3Vers','divImage4Vers');
 
for(i=0;i<listeObj.length;i++){
	obj.actionGroupe("table",listeObj[i],"efface");
}
 
this.actionGroupe = function(typeS, idS, action){
	var listeDivEnf = document.body.getElementsByTagName(typeS);
 
	$j(document).ready(function(){
		for(i = 0; i<listeDivEnf.length ; i++){
			if(listeDivEnf[i].id.match(idS)){
				if (action=="efface"){
					listeDivEnf[i].parentNode.removeChild(listeDivEnf[i]);
				}
			}
		}
	});
}
*/

Exemple :

Code :

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
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
		<div id="divImage1Vers">
			<p>Un mot pour remplir</p>
		</div>
		<div id="divImage2Vers">
			<p>Un mot pour remplir</p>
		</div>
		<div id="divImage3Vers">
			<p>Un mot pour remplir</p>
		</div>
		<div id="divImage4Vers">
			<p>Un mot pour remplir</p>
		</div>
	</div> 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
 
// le code qui suit se résume à un simple :
$("div[id^='divImage']").remove();
 
/*
var listeObj = new Array('divImage1Vers','divImage2Vers','divImage3Vers','divImage4Vers');
 
for(i=0;i<listeObj.length;i++){
	obj.actionGroupe("table",listeObj[i],"efface");
}
 
this.actionGroupe = function(typeS, idS, action){
	var listeDivEnf = document.body.getElementsByTagName(typeS);
 
	$j(document).ready(function(){
		for(i = 0; i<listeDivEnf.length ; i++){
			if(listeDivEnf[i].id.match(idS)){
				if (action=="efface"){
					listeDivEnf[i].parentNode.removeChild(listeDivEnf[i]);
				}
			}
		}
	});
}
*/
		});
 	</script>
</body>  
</html>

**dragonfly** · 31/12/2010, 15h15

A tester, mais c'est vrai que c'est plus simple...

Merci

**SpaceFrog** · 31/12/2010, 17h09

tester ? pourquoi faire ...

Suppression d'objet en JS marche à moitié..

JavaScript

Discussions similaires

Partager

Partager