Hide anchor, but not anchor text

Question

Basically, I want to do the opposite of this: how do i hide anchor text without hiding the anchor

I'd like to be able to have a link on my page which under a certain set of client-side determined conditions would be able to deactivate the link, but still show the text. Is there any way to do this without having two separate elements (one with both the anchor and the text and one with just the text) and then flipping visibility between the two?

EDIT: Sorry, should have clarified. I'd like the link to not be styled like a link when it's deactivated.

Answer 1

Replace the <a> with a generic <span>, and back again.

A simple strategy to replace would be:

1. find the node.
2. add the replaced node before it
3. remove the first node

--

var node = document.getElementById("example");
var new_node = document.createElement("a"); // or "span"
new_node.innerText = text;
node.parentNode.insertBefore(new_node, node);
node.parentNode.removeChild(node);

This code isn't complete, but just to give you an idea.

Answer 2

You can remove the href attribute when the condition is met.
Check this example.
HTML

<a href="http://google.com"> Link to google</a>
<p> Hover over me to remove the link from the anchor</p>

Javascript(Using jquery)

$("p").on("mouseover", function(){
   $("a").removeAttr("href"); 
});

When you hover over the paragraph tag the href is removed but if u never hover over it u can go to google.com, hovering over the p tag is the example condition.
Example Fiddle

This will remove the href permanently from the anchor tag. You will have to add it back when another condition is met.

Answer 3

The short answer is, no. Any hidden or invisible element will hide it's children as well. You may find it easier to simply modify the attributes of the anchor tag when needed.

Hot link:

<a href="#some-url-here" class="">Text here</a>

Non-hot link

<a class="no-link" data-url="#some-url-here">Text here</a>

You can use JavaScript to remove the href attribute, store it's value and add a class that you can use to override any styling.

Answer 4

There's no direct "correct" answer for what you've asked, as there are too many ways to achieve a similar effect. This answer is what I judge to be one of the simplest methods in case you need disable and re-enable the anchor(s) based on conditions.

You can add a click handler such as .on('click.disabledLink', false) to deactivate the anchor functionality (prevents default and stops propagation), then style it with a class that makes it look like normal text in your page.

To re-enable it you just have to off the handler and remove the added class.

//disable link
$('a').on('click.disabledLink', false).addClass('disabledLink');
//re-enable link
$('a').off('.disabledLink').removeClass('disabledLink');

Fiddle

Answer 5

In Firefox and WebKit browsers, you can use pointer-events: none; to make an element "transparent" to pointer (in a functional sense, not a visual sense!). What you're really clicking is the element below. See http://jsfiddle.net/Hqk49/ for demo.
Beware that it'll only work if CSS are enabled (and JS, in order to toggle a class to restore the normal behavior of the link). No support in IE9 and maybe IE10, no support in Opera: https://developer.mozilla.org/fr/docs/CSS/pointer-events

Answer 6

Refer the below CSS:

a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }