Supprimer un LI en fonction de sa position ou contenu dans un DIV ou UL

Version imprimable

22/07/2024, 11h50
clavier12AZQSWX

1 pièce(s) jointe(s)

Supprimer un LI en fonction de sa position ou contenu dans un DIV ou UL
bonjour,

j'essaie de modifier un template html dont j'ai pas la main sur le code HTML mais j'ai la possibilité d'ajouté un script javascript.

Je souhaite supprimer (rentre invisible) le 4eme onglet (donc index=3) d'un UL qui est contenu dans un DIV de class.
Le DIV n'as pas de ID donc je le sélectionne par sa class.
Le UL n'a pas de ID non plus, donc je cherche le contenu qui le cible.
Ce quatrième onglet contient du contenu comportant le mot "Instructors".

Pièce jointe 657401

Donc je sélectionne tous les LI dans ma div, je pose la condition de test de caractère et je change la visibilité si ça valide pas l’expression.
Code:

1 2 3 for (let li of document.querySelectorAll(".scroll_tab_inner li")) { li.style.display = li.textContent === "Instructors" ? "" : "none"; }
Mais voilà, ça ne fonctionne pas. Qu'est-ce que j'ai manqué ou fait comme coquille ?
ça ne remonte aucune erreur (firefox), du coup je nage dans le flou....
Mon code s'exécute bien car si je mets un alert ou console, ça marche. j'ai vérifié l'orthographe de ma class div, et je vois pas où j'ai fait une erreur.

avez-vous une idée ?

Merci de votre aide.

j'ai tenté aussi de sélectionner le LI en fonction du LU mais ça ne fonctionne pas non plus.

Code:

1
2
3
4
    for (let li of document.querySelectorAll(".dtlms-tabs-horizontal li")) {
    li.style.display = li.textContent === "Instructors" ? "" : "none";
 
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ul class="dtlms-tabs-horizontal scroll_tabs_container"><div class="scroll_tab_left_button" style="position: absolute; left: 0px; top: 0px; width: 26px; cursor: pointer; display: none;"></div><div class="scroll_tab_inner" style="margin: 0px; overflow: hidden; white-space: nowrap; text-overflow: clip; font-size: 0px; position: absolute; top: 0px; left: 0px; right: 0px;"><span class="scroll_tab_left_finisher tab_selected scroll_tab_left_finisher_selected" style="display: inline-block;">&nbsp;</span>
								<li class="scroll_tab_first tab_selected current" style="display: inline-block; zoom: 1; user-select: none;">
						<a href="javascript:void(0);"><span class="fas fa-book"></span>Curriculum</a>
					</li>
 
			<li style="display: inline-block; zoom: 1; user-select: none;">
				<a href="javascript:void(0);"><span class="fab fa-docker"></span>About</a>
			</li>
 
							<li style="display: inline-block; zoom: 1; user-select: none;">
					<a href="javascript:void(0);"><span class="fas fa-user-circle"></span>Members</a>
				</li>
							<li style="display: inline-block; zoom: 1; user-select: none;" class="">
				<a href="javascript:void(0);"><span class="fas fa-id-card"></span>
					Instructors				</a>
			</li>
							<li style="display: inline-block; zoom: 1; user-select: none;" class="">
					<a href="javascript:void(0);"><span class="far fa-newspaper"></span>News</a>
				</li>
							<li class="scroll_tab_last" style="display: inline-block; zoom: 1; user-select: none;">
				<a href="javascript:void(0);"><span class="fas fa-star"></span>Reviews</a>
			</li>
		<span class="scroll_tab_right_finisher" style="display: inline-block;">&nbsp;</span></div><div class="scroll_tab_right_button" style="position: absolute; right: 0px; top: 0px; width: 26px; cursor: pointer; display: none;"></div></ul>

22/07/2024, 12h37
Pytet
Bonjour,

Tu peux utiliser le sélecteur css nth-child pour cibler le bon élément :
Code:

1 2 3 .dtlms-tabs-horizontal :nth-child(5) { display: none !important; }
Utilisation de !important à cause du style inline sur la balise html (éviter les styles inlines pour éviter l'utilisation de !important si possible)

Néanmoins ton code html n'est pas valide, une balise html ul n'accepte que des balises li (ou d'autres balises ul/ol) en enfants directs, il ne devrais pas y avoir de div en enfants directs de ul.
https://validator.w3.org/
22/07/2024, 13h41
Doksuri
il n'a pas precise s'il avait acces au CSS

si dans la console, ton code fonctionne, mais pas dans ton script. c'est que ton script est execute trop tot. (soit le fichier est l'un des 1ers a etre charge dans la page, sois le menu est charge dynamiquement plus tard)

la solution du CSS serait un bonne idee, car ca supprime la problematique du timing : tu peux creer du css qui sera applique dans la page
Code:

1 2 3 const style = document.createElement('style'); style.textContent = '.dtlms-tabs-horizontal li:nth-of-type(4) { display: none; }'; document.head.append(style);
note : j'ai repris ton selecteur (car ca semble etre un selecteur fonctionnel. j'ai juste ajoute le nth-of-type(4) pour ne selectionner que le 4eme) mais dans l'ideal, il faudrait un selecteur le plus precis possible pour eviter d'appliquer du style a des elements que tu ne veux pas
22/07/2024, 16h33
NoSmoking
Bonjour,
je reviens sur :

Code:

li.style.display = li.textContent === "Instructors" ? "" : "none";

visiblement dans ton code on voit apparaître des espaces ou des tabulations et cela textContent le prend en compte ce qui fait que ton test sera false.
Utilise innerText, qui ne retourne pas la même chose, ou textContent.trim().

Ressources, en anglais car plus compet :
- Node: textContent property
- HTMLElement: innerText property
Ceci étant et comme il a été dit, l’utilisation du sélecteur CSS est surement la meilleur solution à condition d'avoir un code valide ce qui est un impératif pour ne pas avoir de surprise lors du ciblage d'élément via le CSS.

bonjour... et
merci à tous

J'ai plus ou moins résolu mon problème.

Alors déjà le .trim() était effectivement utile.
Par contre la modif de la CSS par le javascript n'a jamais fonctionné (aucun effet, aucune erreur, même avec F5, CTRL F5... tout est resté visible).
Du coup, j'ai employé la manière forte : suppression de l'élément (avec .remove) et ça fonctionne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 //alert("coucou"); console.log("coucou"); for (let li of document.querySelectorAll(".dtlms-tabs-horizontal li")) { li.style.display=li.textContent.trim()==="Instructors" ? "" : "none"; //console.log("contenu="); //console.log(li.textContent.trim()); var contenu=li.textContent.trim(); if (contenu=="Instructors") li.style.display="none"; if (contenu=="Instructors") li.remove(); if (contenu=="Instructors") console.log("Instructors trouvé!"); } /

23/07/2024, 12h10
Pytet

Citation:

Envoyé par clavier12AZQSWX

Par contre la modif de la CSS par le javascript n'a jamais fonctionné (aucun effet, aucune erreur, même avec F5, CTRL F5... tout est resté visible).

Oui car css défini via l'attribut style (<li style="display: inline-block;">) a un poids (une priorité) plus importante que le css défini via js, d'où la recommandation d'éviter l'utilisation de l'attribut style. Il faut ajouter !important à ta déclaration css si tu veux surcharger celle définie dans le code html.
Edit (merci pour la précision NoSmoking): Le style modifié via JavaScript modifie l'attribut style de l'élément.

Pour en savoir plus sur le poids des sélecteurs (voir notamment "Cas particuliers") : https://www.emmanuelbeziat.com/blog/...-declarations/

Citation:

Envoyé par clavier12AZQSWX

Par contre la modif de la CSS par le javascript n'a jamais fonctionné (aucun effet, aucune erreur, même avec F5, CTRL F5... tout est resté visible).
Du coup, j'ai employé la manière forte : suppression de l'élément (avec .remove) et ça fonctionne :

Cela fait beaucoup de code pour pas grand chose, il te faut penser à la maintenance c'est impératif !

Citation:

Envoyé par Pytet

Oui car css défini via l'attribut style (<li style="display: inline-block;">) a un poids (une priorité) plus importante que le css défini via js, d'où la recommandation d'éviter l'utilisation de l'attribut style.

Le style modifié via JavaScript modifie l'attribut style de l'élément.
Code:

1 2 3 4 5 6 7 8 9 10 <ul class="liste"> <li style="display:inline-block">un</li> <li>deux</li> <li>trois</li> </ul> <script> const elem = document.querySelector(".liste li"); elem.style.color = "red"; elem.style.display = "none"; console.log(elem.outerHTML);
la sortie sera :

Code:

<li style="display: none; color: red;">un</li>

Citation:

Il faut ajouter !important à ta déclaration css si tu veux surcharger celle définie dans le code html.

Effectivement, si tu as dans ta feuille de style un :
Code:

1 2 3 4 li { display: block !important; color: blue; }
alors le résultat sera que l'élément restera affiché mais écrit en rouge.

30/07/2024, 12h01
clavier12AZQSWX
bonjour,

comme le code HTML du template n'est pas propre, quand je masquer/supprimer un LI, il y avait un décallage dans le contenu afficher de l'onglet suivant...
Bref j'ai trouvé une autre méthode plus radicale en jquery (surement convertible en javascript) :
Code:

1 2 $("li:contains(Instructors)").remove(); $('.dtlms-tabs-horizontal-content').has('div.dtlms-title:contains(Instructors)').remove();
La 1ere exécution supprime l'onglet LI
Le seconde exécution supprime le div parent (et ses fils) qui contenait le texte affiché quand on cliquait sur le LI (un onglet TAB).