jQuery remove all li elements with empty a childs

Question

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

Example:

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

Answer 1

You could combine the :has() / :empty jQuery selectors:

Example Here

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

Answer 2

Use following script

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

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

Answer 3

To only remove li elements with 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 -->