JavaScript - Remove the href Attribute from Links Using jQuery or JS Last Updated : 27 Nov, 2024 Comments Improve Suggest changes Like Article Like Report 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 MethodYou 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 PlaceholderInstead 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() MethodIf 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> Comment More infoAdvertise with us Next Article JavaScript - Remove the href Attribute from Links Using jQuery or JS A anujpaz9pe Follow Improve Article Tags : JQuery Web Technologies Similar Reads How to disable HTML links using JavaScript / jQuery ? Given an HTML link and the task is to disable the link by using JavaScript/jQuery. Approach 1: Disable HTML link using JavaScript using setAttribute() Method. JavaScript setAttribute() Method: This method adds the defined attribute to an element and gives it to the passed value. In case of the speci 5 min read How to remove underline from link using JavaScript? Given a link and the task is to remove the underline from the anchor element with the help of JavaScript. There are two approaches that are discussed below: Approach 1: Use textDecoration property of JavaScript to perform this operation. It can be set to many values but, in this example, it has been 2 min read How to remove all attributes of an HTML element using jQuery ? In this article, we will see how to remove all attributes of an HTML element using jQuery. To remove all attributes of elements, we use the removeAttributeNode() method and .removeAllAttributes(). Syntax: $.fn.removeAllAttributes = function() { return this.each(function() { $.each(this.attributes, f 1 min read How to find all links with an hreflang attribute using jQuery ? In this article, we will learn to find all links with a hreflang attribute. The hreflang is an attribute that tells search engines the relationship between pages in different languages on your website. To find all links with an hreflang attribute using jQuery, you can use the attribute selector $('[ 2 min read How to remove “disabled†attribute from HTML input element using JavaScript ? In HTML, we use input elements for user input. The 'disabled' property helps prevent interaction with these elements. For example, if we only want users over 18 to input their Adhar card numbers, we can use JavaScript to remove the 'disabled' attribute when the user enters an age greater than 18. Th 2 min read How to remove clickable behavior from a disabled link using jQuery ? In this article, we will see how to remove the clickable behavior from a disabled link using jQuery. To remove the clickable behavior, we will use the removeAttr() method. The removeAttr() method is used to remove one or more attributes from the selected elements. Syntax: $(selector).removeAttr(attr 1 min read How to change href attribute of a hyperlink using jQuery ? Changing the href attribute of a hyperlink using jQuery refers to the process of modifying the URL a link directs to without altering the HTML manually. This capability is useful for creating dynamic web applications where link destinations need to change based on user interactions or other conditio 2 min read How to remove an attribute from each matched elements using jQuery ? In this article, we will learn how to remove an attribute from each of the matched elements using JQuery. JQuery is the fastest and lightweight JavaScript library that is used to simplify the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript 2 min read How to remove CSS property using JavaScript? To remove CSS property using JavaScript, we have different methods. In this article, we will learn how to remove CSS property using JavaScript. Below are the Methods used to remove CSS property using JavaScript: Table of Content Using CSS removePropertyUsing the setProperty methodMethod 1: Using CSS 2 min read How to set location and location.href using JavaScript ? In this article, we will set the location and location.href using Javascript.Both location and location.href are used to set or return the complete URL of your current page. They return a string that contains the entire URL with the protocol.Syntax:location = "https://www.geeksforgeeks.org";orlocati 1 min read Like