0

I'm using elementor for wordpress and they have an icon list widget which lets you show a bullet pointed list. Unfortunately it doesn't let you hide list items that don't contain text which leaves blank bullet points on the page.

The element is li.elementor-icon-list-item and contains "elementor-icon-list-icon" (the bullet point) and "elementor-icon-list-text" (the text). I can hide the empty bullets using:

li.elementor-icon-list-item>.elementor-icon-list-icon {
    display: none !important;
}

But that removes all bullets including from the ones with text too. Any ideas?

monkeyman50
  • 11
  • 1
  • Show the HTML involved. – Michael Benjamin May 23 '20 at 16:06
  • Possible answers [here](https://stackoverflow.com/questions/43121828/css-hide-element-if-child-is-empty) or [here](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – iamcastelli May 23 '20 at 16:08
  • Can you share the url? – Earid May 23 '20 at 16:18
  • Hi there, unfortunately it's a local xamp hosted environment I'm working on – monkeyman50 May 23 '20 at 16:20
  • You can create a class, for example called 'hidden', and give it the css property of display none. With javascript, you check if the li is empty. Here is an answer you can adjust maybe https://stackoverflow.com/questions/14535733/how-to-check-if-div-element-is-empty/14535761 then if it is empty, you set the hidden class – rank May 23 '20 at 21:21

0 Answers0