Masquer un élément HTML sous condition

Bonjour à tous,

Je solicite votre aide sur la création d'un script permettant de masquer un élément si celui-ci ne possède pas de contenu.

J'ai créé une boutique en ligne sur WordPress car je n'ai pas beaucoup de connaissance en programmation web, à part quelques notions en HTML/CSS.

Sur ma page Boutique, j'ai inséré un plugin pour filtrer les produits par mots-clés, catégorie, prix, taxonomies... Dans les réglages de ce plugin, une option me permet de masquer les termes (checkbox) qui ne possèdent pas de résultat. Cependant, selon certaines catégories, se sont des taxonomies entières qui seront vide mais le bloc de la taxonomie est toujours visible, il a simplement masquer les termes/checkbox de son contenu.

Par exemple, j'ai 2 catégories : "Maison & Jardin" et "Chaussures". J'ai un autre filtre "Pointure" qui est toujours affiché. Du coup, lorsque je sélectionne la catégorie "Maison & Jardin", il n'y a plus lieu d'afficher le filtre "Pointure" car tout son contenu est vidé de ses checkbox car aucune pointure ne correspond à cette catégorie.

Comme vous pouvez le voir sur les screenshots ci-joints ou encore le site directement https://www.tillap.com/boutique/ j'aimerai masquer tout les éléments de type "taxonomy" par un simple [data-sf-field-type="taxonomy"]{display:none;} seulement SI il n'y a aucune ligne de type <li> dans la partie <ul> dans son contenu.

Je pense qu'il doit y avoir moyen d'obtenir ce résultat en JavaScript mais je n'ai aucune connaissance dans ce langage c'est pourquoi j'aurai aimé être orienté vers la solution sur ce forum.

Merci d'avance pour votre aide!

Pièces jointes :
Pièce jointe 546858 Pièce jointe 546862

Bonjour et bienvenue sur DVP.

Pour le principe si tu ne peux pas faire autrement que de ne pas les afficher au départ il te suffit de :

• récupérer les éléments <ul> enfant de <li> ;
• pour chacun, tester SI il n'y a pas d'enfant ALORS masquer le parent, <li> dans ce cas.

Ce qu pourrait se traduire par

Code:

---

1 2 3 4 5 6 7

const oULs = document.querySelectorAll("li ul"); oULs.forEach((el) => { //Array.prototype.forEach.call(oULs, function (el) { /* si support IE requis */ if (!el.firstElementChild) { el.parentNode.style.display = "none"; } });

---

Nota : Il faut mettre ce script en fin de page pour que les éléments soient présents dans le DOM.