Question

I have some generated output like this:

<figure>
    <a href="location.php"><img src=""></a>
</figure>

and when I apply this JS:

$(funciton() {
    $('img').each(function(){
        if($(this).attr('src') == null || $(this).attr('src') == '')
            { 
                $(this).parent().remove();
            }
});

It removes the img tag, and it’s parent a tag but leaves this output on the page:

<figure>
"&#8203"            ​
</figure>

How can I remove the paren’t ‘s parent tag or just trim it so there is no blank entity present? When there is anything in the figure tag it has a 1px height and margin from css. I can change css, but want to figure this out, help is much appreciated!

Answer 1

If you want to make sure that the parent <figure> tag is empty if the image tag has no .src, you can do this:

$(function() {
    $('img').each(function() {
        if(!this.src) { 
            $(this).closest("figure").empty();
        }
     }
});

.empty() removes all childnodes and any text in the element.

Note, I also simplified your comparison on .src. First off, there’s no need to use jQuery here and second off, a single test can check for any empty value.

If you really want the <figure> tag to take up no space on the page, you might also just do a .hide() on it.