From the life of a screen worker

Find empty elements without children

For my article Javascript snippet: Display font names and styles on websites I searched for a solution to use the JavaScript library jQuery to find all DOM elements that only contain text and no other DOM elements. Since I did not find what I wanted right away, here's a short explanation.

For a working solution the :empty selector has to be combined with the :has and :not selector. Actually the :not selector has to be chained and used twice. All not-empty elements can be found using the *:not(:empty) selector. Since this selector also finds elements that contain or also contain child DOM elements, we have to use the selector:not(:has(*)) to remove those elements. The complete jQuery code looks like this: