JQuery: Hide anchor if href is empty

Question

Been on this one for a while now. Basically, I need to check where a href on an anchor tag with the class .pdf-download is empty, and if it is, hide it.

I have attempted a few options but with no luck. This is what i have so far:

$("a.pdf-download").each(function (i) {
  if ($('[href]:empty',this).length == 1) { 
    $(this).hide();
  } else {
    $(this).show();
  }
});

Hi Guy - I see you have asked three questions and received some good answers. Make sure you mark an answer as correct by ticking the checkmark next to the best answer. It is how the SO community works. You may also want to read the FAQ - http://stackoverflow.com/faq — mrtsherman, Sep 28 '11 at 16:16

score 28 · Accepted Answer · answered Sep 28 '11 at 16:06

28

if ($(this).attr('href') != '') { 
    $(this).hide();
} else {
    $(this).show();
}

Note that you can also do this in css with attribute selectors:

a.pdf-download[href='']{
    display:none;
}

This is not supported in ie6 though.

answered Sep 28 '11 at 16:06

amosrivera

26,114
9
67
76

5

+1 - I like the CSS solution. You can use that same selector in jQuery if you want too. `$('a[href=""]').hide();` – mrtsherman Sep 28 '11 at 16:13
Note that that jQuery selector won't hide a link tag with no href attribute at all. – Elliot Nelson Sep 28 '11 at 16:18

score 7 · Answer 2 · answered Sep 28 '11 at 16:17

7

You can also do this with a jQuery selector, as follows:

// Hide any links with blank href or no href attribute
$('a.pdf-download[href=], a.pdf-download:not([href])').hide();

answered Sep 28 '11 at 16:17

Elliot Nelson

11,371
3
30
44

score 4 · Answer 3 · answered Sep 28 '11 at 16:08

Use this solution. it will also produce the desired results when the href attribute is not defined. If you use a CSS selector (JQuery), non-existent href attributes will not be detected.

$("a.pdf-download").each(function (i) {
    if (!this.href) { 
        $(this).hide();
    } else {
        $(this).show();
    }
})

It's not necessary to use a JQuery method to get the href attribute, becausethis.href is just as readable, faster and also universally supported.

score 3 · Answer 4 · answered Sep 28 '11 at 16:08

3

Would something like this work?

$("a.pdf-download").each(function (i) {
  if ($(this).attr('href').length == 0) { 
    $(this).hide();
  } else {
    $(this).show();
  }
});

answered Sep 28 '11 at 16:08

Matt

3,638
2
26
33

This works if href is set on the element, but if it isn't it will throw an error. If you try `$('test').attr('href').length` it will return "TypeError: Cannot read property 'length' of undefined" as `.attr('href')` returns `undefined`. I imagine in most cases this method will work fine, but it's worth noting this caveat. – andyface Jun 20 '14 at 09:50

score 1 · Answer 5 · answered Sep 28 '11 at 16:10

1

I am a jquery beginner myself, but thats how I would do it:

$("a.pdf-download").each(function (i) {

    var aHref = $(this).attr('href');

    if (aHref == '' || !aHref) {

        $(this).hide();

    };

});

Demo: http://jsfiddle.net/BZq9c/1/

answered Sep 28 '11 at 16:10

r0skar

8,338
14
50
69

score 1 · Answer 6 · answered Sep 28 '11 at 16:15

1

$(function() {

    $('a').each(function() {
        (!$(this).attr('href')) ? $(this).hide() : $(this).show();
    });

});

Almighty Demo: http://jsfiddle.net/each/j9DGw/

answered Sep 28 '11 at 16:15

daryl

14,307
21
67
92

score 1 · Answer 7 · answered Sep 28 '11 at 16:18

1

$("a.pdf-download").each(function() {
    var href = $(this).attr("href");
    if(href == '') {
        $(this).remove();
    }
});

or

$("a.pdf-download[href='']").remove()

answered Sep 28 '11 at 16:18

David Houde

4,835
1
20
29

JQuery: Hide anchor if href is empty

7 Answers7