Discussion :

[clavier12AZQSWX]

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".



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 js :

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

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.

[clavier12AZQSWX]

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

Code js :

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

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

Code html :

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
<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>

[Pytet]

Bonjour,

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

Code :

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

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/

[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 javascript :

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

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

[NoSmoking]

Bonjour,
je reviens sur :

Code :

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

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.

[clavier12AZQSWX]

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 javascript :

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
//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é!");
}
 
 
 
 
 
/

[Pytet]

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/

[NoSmoking]

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 !

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 html :

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

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 html :

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

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

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 css :

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

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.

[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 jquery :

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

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).