Discussion :

[vttman]

Bonjour à Tous,

Samedi, je faisais un peu d'esprit sur ce vieux sujet
=>
https://www.developpez.net/forums/d384620/webmasters-developpement-web/javascript-
ajax-typescript-dart/javascript/recuperer-id-d-page/

où danielhagnoul me remettait gentillement en place d'ailleurs

Force est de constater que ce code initial
=>

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
 
 function Eject(MaClassName){
	const INIT_ELT = 1; 
	if (MaClassName !="") {
		// suppression des modules pour une CLASSE donnée => MaClassName 
		var elemclass = document.getElementsByClassName(MaClassName);
		var elementsLength = elemclass.length;  
		for (var i = 0 ; i < elementsLength ; i++) {
			elemclass[i].innerHTML="";   
		}
		// suppression dans le module de contrôle MODCONT pour l'ID donné => MaClassName 
		var elemid = document.getElementById(MaClassName);
		elemid.parentNode.removeChild(elemid);  
	}	
	// Verification du nombre de lignes dans MODCONT
	var length = document.getElementById('btn-hide').getElementsByTagName('p').length;
	// Si plus rien ne reste à part une ligne d'introduction, on supprime MODCONT en utilisant sa classe => 'btn-hide'
	if (length == INIT_ELT) {
		var elemrest = document.getElementsByClassName('btn-hide');
		var elemrestLength = elemrest.length;  
		for (var j = 0 ; j < elemrestLength ; j++) {
			elemrest[j].innerHTML="";   
		}
	}
	};

gagne en clarté avec ce "nouveau" code finalement bien plus clair
=>

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
 
function Eject(MaClassName){
	const INIT_ELT = 1; 
 
	if (MaClassName !="") {
		const MesElemClass = document.querySelectorAll('.'+MaClassName);
		for ( let [ i, id ] of Array.from( MesElemClass ).entries() ) {
			id.innerHTML=""
		} 
		const MonId = document.querySelectorAll('#'+MaClassName);
		for ( let [ i, id ] of Array.from( MonId ).entries() ) {
			id.parentNode.removeChild(id);
		} 
	}	
	// Verification du nombre de lignes dans MODCONT
	const LigModcont = document.querySelectorAll('div#btn-hide>p');
	var compt =0;
	var monid;
	for ( let [ i, id ] of Array.from( LigModcont ).entries() ) {
		compt=compt+1;
		monid=id;
	}
	if (compt == INIT_ELT) {
		const MesElemClass = document.querySelectorAll('.btn-hide');
		for ( let [ i, id ] of Array.from( MesElemClass ).entries() ) {
			id.innerHTML=""
		} 
	}	
 
 
	};
Eject("badgeclip-ntop");

Le but de ce code est
1) de faire disparaitre en fonction d'un paramètre XYZ
tous les élements d'une classe donnée .XYZ (bref je supprime des modules JOOMLA à l'affichage)
2)puis ensuite un ID #XYZ qui correspond à une seule ligne dans un module "maitre"

Voici le code de mon module "maitre"

Code :

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

1
2
3
4
5
6
7
<div id="btn-hide">
<p> - CHOIX OPTIONS - </p>
<p id="XYZ"</p>
<p id="YZA"</p>
<p id="ABC"</p>
etc.
</div>

3)Ensuite vérifier dans ce module "maitre" s'il nous reste encore des lignes ("YZA","ABC" etc.) à faire disparaitre
4)Si plus de lignes alors on surprime le module "Maitre"

J'espère être assez clair

Voici ma question ... ce script semble fonctionner mais
je pense que je peux encore alléger la syntaxe

ex ici

Code :

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

1
2
3
4
5
 
		const MonId = document.querySelectorAll('#'+MaClassName);
		for ( let [ i, id ] of Array.from( MonId ).entries() ) {
			id.parentNode.removeChild(id);
		}

Je dois supprimer une seule ligne et je fais une boucle bon ...

Est-ce que je dois garder plutôt cette syntaxe ?

Code :

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

1
2
3
 
var elemid = document.getElementById(MaClassName);
elemid.parentNode.removeChild(elemid);

où il y a une alternative ?

idem ici

Code :

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

1
2
3
4
5
6
7
const LigModcont = document.querySelectorAll('div#btn-hide>p');
	var compt =0;
	var monid;
	for ( let [ i, id ] of Array.from( LigModcont ).entries() ) {
		compt=compt+1;
		monid=id;
	}

Je voudrais savoir, dans ce pavé, si j'ai un SEUL élément restant à traiter ou pas et c'est tout !?
Donc là encore je suis dans une boucle mais je veux juste compter ...

Merci pour vos réponses
Ps : Attention je ne suis pas un pro du Javascript

[vttman]

Voici ma question ... ce script semble fonctionner mais
je pense que je peux encore alléger la syntaxe

ex ici

Code :

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

1
2
3
4
5
 
		const MonId = document.querySelectorAll('#'+MaClassName);
		for ( let [ i, id ] of Array.from( MonId ).entries() ) {
			id.parentNode.removeChild(id);
		}

Je dois supprimer une seule ligne et je fais une boucle bon ...

Est-ce que je dois garder plutôt cette syntaxe ?

Code :

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

1
2
3
 
var elemid = document.getElementById(MaClassName);
elemid.parentNode.removeChild(elemid);

où il y a une alternative ?

... un petit UP pour cette 1ère partie normalement basique pour les pratiquants ...
D'ailleurs je pense que je devrais déjà utiliser

Code :

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

element.querySelector()

et tester le retour

"Retourne null si aucun élement correspondant n'est trouvé; sinon, retourne le premier élement correspondant trouvé."

mais question syntaxe, je patauge encore un peu ...

Peut-être ceci ?

Code :

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

1
2
3
4
const MonId = document.querySelector('#'+MaClassName);
if (MonId) {
...		
}

[NoSmoking]

Bonjour,
pour la recherche d'éléments par class ou par id l'utilisation de querySelectorAll est correcte, simplement dans le cas d'une recherche sur l'id, qui doit être unique, querySelector est suffisant tout comme pour récupérer le 1st élément répondant au sélecteur passé en paramètre, querySelector('body') par exemple.

Dans tous les cas il convient de tester la valeur de l'objet retourné avant utilisation

Code :

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

1
2
3
4
var oElem = document.querySelector( "#id_element");
if (oElem) {
    // il existe on peut donc s'en servir
}

Pour le reste j'ai pas bien compris ce qui te coince !

[vttman]

Merci NoSmoking !

En fait ça ne coinçait pas, mon code fonctionne, mais je voulais juste quelques conseils
pour avoir un code le plus simple possible (pas de boucle inutile par exemple)

Ainsi ceci
=>
Je veux compter le nombre de paragraphe (balise <p>) dans ma div avec id = "btn-hide"
Ci dessous je fais une boucle pour ça et je compte (var compt)
s'il n'y a qu'un élément je le récupère pour un traitement (monid=id)
s'il y a plus d'élements, je ne fais rien ...

Je me demandais aussi s'il n'y avait pas plus simple que mon code ci-dessous
pour réaliser ça !?
=>

Code :

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

1
2
3
4
5
6
7
8
 
const LigModcont = document.querySelectorAll('div#btn-hide>p');
	var compt =0;
	var monid;
	for ( let [ i, id ] of Array.from( LigModcont ).entries() ) {
		compt=compt+1;
		monid=id;
	}

[NoSmoking]

Je veux compter le nombre de paragraphe (balise <p>) dans ma div avec id = "btn-hide"

il te suffit de lire la longueur de la nodeList, ce n'est pas un tableau mais possède une propriété length, retournée par la méthode querySelectorAll.

Code :

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

1
2
var oList = document.querySelectorAll('div#btn-hide > p');
console.log(oList.length);

[vttman]

Simplissime !
Je passe en résolu, et continue d'adapter le reste de mon code, merci encore !

[Beginner.]

C'est vrai que c'est top ce qu'on peut faire avec les sélecteurs, il faudrait que je m'y mette...