In my research, I came across the sitepoint page and also the quirksmode page discussing the new :empty pseudoclass.
Sitepoint mentioned that the empty style persists even when dynamic content is added, with Firefox being the browser known for behaving this way.
On the other hand, Quirksmode stated that the empty state gets discarded once it's filled in with text or elements. While testing their demo on Chrome 19, everything worked fine for me. This led me to assume that only Firefox was experiencing issues.
However, I encountered a problem within my plugin code where I dynamically populate a list with items. Despite trying to append list items in this fiddle, they don't show up until inspected via the console (strangely appearing when clicking on the <li> in the element tree).
I'm curious as to why this behavior is happening and whether there's a workaround to effectively remove the empty style.
While I realize there are alternative methods to achieve what I'm attempting in the fiddle (currently using one of them), the simplicity of the :empty method appeals to me.
UPDATE:
I've implemented a button to remove items. Ideally, when the last item is removed, the list should disappear - but it still doesn't work. I'll test it in another browser to see if there's any difference.
FIX
A temporary fix or alternative to using :empty and display:none would be adjusting the element to have zero values for width, height, borders, margins, and paddings. Additionally, apply position:absolute to take it out of the flow.