JavaScript - Remove the href Attribute from Links Using jQuery or JS

Last Updated : 27 Nov, 2024

Removing the href attribute from links using jQuery is a common task when you want to disable navigation functionality temporarily or modify link behavior dynamically. Here's how you can achieve this with simple methods.

1. Using the removeAttr Method

You can use jQuery’s removeAttr method to remove the href attribute from all or specific links.

Anchor tags (<a>): These are used to create a links on the page that take you to another website when clicked.
Button (<button>): Clicking this button removes the link from the anchor tags.
removeAttr method: This jQuery method remov href (link) from the anchor tags, making them no longer clickable.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
	<a href="https://www.geeksforgeeks.org/javascript/" 
       class="myLink">Go to Example</a>
	<a href="https://www.geeksforgeeks.org/react-native/" 
       class="myLink">Go to Another Example</a>
	<button id="removeHrefButton">Remove href</button>
	<script>
		$('#removeHrefButton').click(function () {
          // Removes href attribute from all elements with class myLink
			$('.myLink').removeAttr('href'); 
		});
	</script>
</body>
</html>

2. Replace href with a Placeholder

Instead of removing href, replace it with a placeholder like # to indicate the link is inactive.

When you click the "Replace href" button, it triggers a change in the links.
The attr('href', '#') method replaces the current link URL with #, making the link not go anywhere.
After the button click, the links will still look like clickable, but they won’t take you to the original websites.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
	<a href="https://www.geeksforgeeks.org/javascript/" 
       class="myLink">Go to Example</a>
	<a href="https://www.geeksforgeeks.org/react-native/"
       class="myLink">Go to Another Example</a>
	<button id="replaceHrefButton">Replace href</button>
	<script>
		$('#replaceHrefButton').click(function () {
          // Replaces href attribute with #
			$('.myLink').attr('href', '#'); 
		});
	</script>
</body>

</html>

3. Using event.preventDefault() Method

If you don't want to remove or replace the href attribute, you can prevent the default link behavior dynamically.

When you click the "Disable Links" button, it sets up a click handler for the links.
The event.preventDefault() method stops the links from going anywhere when clicked.
After clicking the button, clicking the links will show an alert message ("Link disabled!") instead of opening the webpage.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
	<a href="https://www.geeksforgeeks.org/javascript/" 
       class="myLink">Go to Example</a>
	<a href="https://www.geeksforgeeks.org/react-native/" 
       class="myLink">Go to Another Example</a>
	<button id="disableLinksButton">Disable Links</button>
	<script>
		$('#disableLinksButton').click(function () {
			$('.myLink').on('click', function (event) {
              // Prevents the default click action
				event.preventDefault(); 
				alert('Link disabled!');
			});
		});
	</script>
</body>
</html>

JavaScript - Remove the href Attribute from Links Using jQuery or JS

anujpaz9pe

Improve

Article Tags :

JavaScript - Remove the href Attribute from Links Using jQuery or JS

1. Using the removeAttr Method

2. Replace href with a Placeholder

3. Using event.preventDefault() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?