I have started a website recently. But I don't have any technical knowledge.

Please suggest me how can I hide href links in Javascript

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

I’m in the same boat as you, just starting out and learning as I go. The tips here have been super helpful. I especially like the idea of using a click event handler to make links non-functional without altering their appearance—really clever!

Site Moderator
Site Moderator badge
May 17, 2024

1. CSS Visibility

You can use CSS to make the link not visible on the page, but it will still be present in the HTML and accessible to screen readers, which might be beneficial for accessibility reasons.

// Hide the link using CSS visibility 
document.getElementById('myLink').style.visibility = 'hidden';

2. CSS Display

This approach completely removes the element from the document flow, as if it doesn’t exist on the page, which can affect your layout.

// Hide the link using CSS display 
document.getElementById('myLink').style.display = 'none';

3. Removing the Href Attribute

If you want to keep the link visible but non-functional, you can remove the href attribute. The link will remain visible but will not lead anywhere when clicked.

// Remove the href attribute from the link document.getElementById('myLink').removeAttribute('href');

4. Replacing the Href Attribute

You might want to replace the href with a JavaScript function or simply disable it by pointing it to javascript:void(0); which does nothing when clicked.

// Change the href to a non-functional JavaScript document.getElementById('myLink').href = 'javascript:void(0);';

5. Adding a Click Event Handler

You can also add an event handler that prevents the default link behavior, effectively disabling the link.

// Prevent the default action of the link document.getElementById('myLink').addEventListener('click', function(event) {     

Choose the Right Method

  • CSS Visibility or Display: Best for temporarily hiding links without removing them from the document (they can easily be shown again).
  • Removing or Replacing the Href: Good for making a link non-functional while keeping it visible.
  • Adding a Click Event Handler: Useful for more complex interactions where you might want to do something else when the link is clicked.

Remember to consider the impact on user experience and accessibility when deciding how to handle links in your web applications.

Site Moderator
Site Moderator badge
May 16, 2024

Hello @pwillson

You can achieve this in several ways.

  1. You can use Void(0) to display some JavaScript code in the status bar instead of the URL and will still work as a normal link when clicked.
<a href="javascript:void(0)" onclick="location.href=''">Mousing over this URL will display "void(0)" in the browser's status bar.</a>
  1. You can use the querySelector
 <a href="" id="myLink">Click me</a>

    // Select the link using querySelector
    var link = document.querySelector('#myLink');
    // Hide the link visually = 'none';

Hope that this helps!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel