jQuery: How to hide and show the href?

Question

Is it possible to hide the href without hiding the whole anchor tag?

<a href="somelinks">Click Me</a>

The reason I need this is because I'd need to hide and show it based on desktop and mobile view controlled by JS.

Something like $('a').attr('href').hide(); won't work

Edit: I need to 'hide' the href so I can 'show' it where I need to. Removing the href will not restore it.

Simply to use `$('a').on('click',function(){return false;});` should work — R Lam, May 27 '15 at 10:55
Duplicate question: [How to enable or disable an anchor using jQuery?](http://stackoverflow.com/questions/1164635/how-to-enable-or-disable-an-anchor-using-jquery) — Yogi, May 27 '15 at 10:57

score 6 · Answer 1 · answered May 27 '15 at 10:36

6

You can use removeAttr():

$('a').removeAttr('href');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="somelinks">Click Me</a>

Description: Remove an attribute from each element in the set of matched elements

answered May 27 '15 at 10:36

Alex Char

32,879
9
49
70

You can not hide an attribute. You can only remove it. Alternative you can use `#` as value. – Alex Char May 27 '15 at 11:01
Check also here a solution I create [fiddle](http://jsfiddle.net/AlexChariz/rzoLux66/) – Alex Char May 27 '15 at 11:16
1

Agree with Alex Char . @Tushar indirectly you do the same thing. – Hardy May 27 '15 at 11:27
@Hardy Yes but the `href` is hidden for the links – Tushar May 27 '15 at 11:36

Tushar · Accepted Answer · 2015-05-27T10:47:43.417

3

If you want to hide the href but still want it to redirect when clicked, use this.

Get the URL and put it in data attribute. Then remove the href attribute.

$('a').each(function() {
    $(this).data('href', $(this).attr('href')).removeAttr('href');
});

When clicked on anchor, get the URL from data attribute and redirect.

$('a').on('click', function() {
    window.location.href = $(this).data('href');
});

edited May 27 '15 at 10:47

answered May 27 '15 at 10:40

Tushar

85,780
21
159
179

score 1 · Answer 3 · answered May 27 '15 at 10:44

But what if You want to restore href? From where will You get it?

<div class="some-container">
    <a href="somelinks">Click Me</a>
    <a href="somelinks2">Click Me</a>
</div>

function hideHrefs(selector) {
    $(selector).each(function(){
        var $this = $(this);
        var href = $this.attr('href');
        $this.attr('href', '').data('href', href);
    });
}

function restoreHref($element) {
    var href = $element.data('href');
    $element.attr('href', href);
}

hideHrefs('.some-container a'); // hides all hrefs from links in container element
restoreHref($('.some-container a:first'));  // restores href for dedicated element

score 0 · Answer 4 · answered May 27 '15 at 10:40

0

Is it possible that when you don't want the href you do something like this

$($.find("a")).attr("href", "#")

answered May 27 '15 at 10:40

Cyril Cherian

32,177
7
46
55

What is `$($.find("a"))` ? – Tushar May 27 '15 at 10:45
$.find("a") will get you all the anchor tags you can give your specific selector here. [More](https://api.jquery.com/find/) $($.find("a")).attr("href", "#") //to all the anchors tags returned by find make the href as "#" – Cyril Cherian May 27 '15 at 10:49

jQuery: How to hide and show the href?

4 Answers4