12

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);
        }                               
    });    
//-->
});
Ash
  • 2,108
  • 2
  • 17
  • 22
Jared
  • 1,795
  • 6
  • 32
  • 55

3 Answers3

18

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
}
user229044
  • 232,980
  • 40
  • 330
  • 338
  • 2
    `this.href` is much easier ;) – Nick Craver Sep 22 '10 at 20:17
  • 3
    doesn't that just check if there is an href attr(), not if it is blank? – Jared Sep 22 '10 at 20:18
  • 2
    @Nick I sometimes forget that there's this archaic "JavaScript" thing sitting below jQuery :p – user229044 Sep 22 '10 at 20:18
  • @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. – user229044 Sep 22 '10 at 20:22
  • 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. – Frank Schwieterman Oct 06 '10 at 23:29
16

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.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • I like how this removes the need for a conditional branch – mcgrailm Sep 22 '10 at 20:21
  • It works in your link, but when I put it in my code, I get a `Uncaught SyntaxError: Unexpected token ILLEGAL` – Jared Sep 22 '10 at 20:23
  • @Jared - I sounds like you copied some weird ascii character looking like a space in there...try deleting the spacing around anything you copied. – Nick Craver Sep 22 '10 at 20:26
  • 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? – Jared Sep 22 '10 at 20:31
  • @Jared - The `[href='']` is what's checking for the empty `href` attribute...then the `.replaceWith()` is only working on *those* anchors, make sense? – Nick Craver Sep 22 '10 at 20:34
1

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'); 
} 
})
Kevin
  • 11
  • 2