JQuery removes all li elements with empty child

Question

How to remove all elements <li></li>with an empty tag <a></a>?

Example:

<li><a href=''>List item</a></li> //Do not delete
<li><a href=''></a></li> //Delete

Answer 1

You can combine :has()/ :emptyjQuery selectors:

Example here

$('li:has(a:empty)').remove();

Answer 2

Use the following script

$("li a:empty").parent().remove();

For reference - https://api.jquery.com/empty/

Answer 3

To remove only items liwith empty a children , use this:

$("li > a:empty").parent().remove();
//OR $('li:has(>a:empty)').remove();

Examples:

<li><a href=''>List item</a></li> <!-- not remove this -->
<li><a href=''></a></li> <!-- remove this -->
<li><span><a href=''></a></span></li> <!-- not remove this -->