How do I check for empty attr() in jquery?

jquery each attr

36,179

Solution 1

You can check for an empty href attribute and "unwrap" those links using .replaceWith() like this:

$(".article[href='']").replaceWith(function() { return this.innerHTML; });

You can give it a try here.

Solution 2

You can simply test the attribute as a boolean instead of testing it against undefined:

if ($(this).attr('href')) {
  // href is not blank
} else {
  // href is blank
}

Solution 3

To simply get rid of the 'href' attribute:

$("#myLink[href='']").removeAttr('href');

For multiple targeting, for example the 'style' attribute:

$("#myDiv td, a, p, table, nav, header[style='']").removeAttr('style');

This way, you'll only get rid of the Attribute when it's empty instead of deleting the whole element itself.

A full code example would be:

$('#myDiv table, tr, td, a, p').each(function() { 
if ($(this).attr('style') == '') { 
    $(this).removeAttr('style'); 
} 
})

36,179

Author by

Jared

Updated on July 20, 2022

Comments

Jared almost 2 years

I have a few divs that are created using PHP. The anchor within the div always has a HREF, even if it is blank. Basically, I am trying to detect if the HREF is blank. If it has content, do nothing, if it's blank, strip the text out, delete the anchor, them put the text back in.

Here is the div:

<div class="title"> 
    <a class="article" href="">Lorem Ipsum</a> 
</div>

Here is my code:

jQuery(document).ready(function($) { //required for $ to work in Wordpress

    $(".article").each(function(){
        if ($(this).attr('href') !== undefined) {
            return;
        } else {
            var linkTitle = $(this).html();
            $(this).parent().empty().html(linkTitle);
        }                               
    });    
//-->
});

Nick Craver almost 14 years

this.href is much easier ;)
Jared almost 14 years

doesn't that just check if there is an href attr(), not if it is blank?
user229044 almost 14 years

@Nick I sometimes forget that there's this archaic "JavaScript" thing sitting below jQuery :p
mcgrailm almost 14 years

I like how this removes the need for a conditional branch
user229044 almost 14 years

@Jared No, it will return the value of the attribute or undefined if it doesn't exist. In JavaScript, "" (an empty string) is equivalent to boolean false. attr() will evaluate to false if the attribute doesn't exist or is empty.
Jared almost 14 years

It works in your link, but when I put it in my code, I get a Uncaught SyntaxError: Unexpected token ILLEGAL
Nick Craver almost 14 years

@Jared - I sounds like you copied some weird ascii character looking like a space in there...try deleting the spacing around anything you copied.
Jared almost 14 years

I copy/pasted it in notepad to try and get rid of illegal chars, seems to work now, thanks!. But I am not sure I understand WHY this code works? Does replaceWith() have some ability that automatically checks for attributes, and if it doesn't find any, it executes its function?
Nick Craver almost 14 years

@Jared - The [href=''] is what's checking for the empty href attribute...then the .replaceWith() is only working on those anchors, make sense?
Frank Schwieterman over 13 years

note that IE8 will also return an empty string if the href doesn't exist. The if expression is still valid, but does try href="" and no href as equivalent on IE.