JavaScript: Remove All Links from the Document

Introduction

In web development, you might come across scenarios where you need to dynamically remove all links (anchor tags) from a webpage. Whether you're cleaning up scraped content, enforcing navigation restrictions, or simply experimenting, JavaScript offers several ways to do this efficiently using the DOM (Document Object Model).

What Is a Link in HTML?

A link or anchor in HTML is represented by the <a> tag. These elements typically contain an href attribute and allow users to navigate to another page or section.

<a href="https://example.com">Visit Example</a>

Let’s now explore how to remove all such elements using JavaScript.

Method 1: Using querySelectorAll and forEach

Description:

This approach selects all <a> elements and removes them one by one using remove().

document.querySelectorAll('a').forEach(function(link) {
  link.remove();
});

Output:

All anchor tags will be removed from the DOM.

Explanation:

querySelectorAll('a') returns a static NodeList of all anchor elements. The forEach loop then iterates through each link and removes it using link.remove().

Method 2: Using a while loop and getElementsByTagName

Description:

This technique uses the live HTMLCollection from getElementsByTagName, allowing you to continuously remove elements as the list updates.

let links = document.getElementsByTagName('a');
while (links.length > 0) {
  links[0].parentNode.removeChild(links[0]);
}

Output:

All anchor elements are deleted. DOM is free of links.

Explanation:

getElementsByTagName('a') returns a live collection. As you remove links, the collection updates, so always removing the first element (links[0]) is a safe loop condition.

Method 3: Remove only visible or styled links

Description:

In some cases, you might want to remove only links that are visible or styled a certain way.

document.querySelectorAll('a').forEach(function(link) {
  const style = window.getComputedStyle(link);
  if (style.display !== 'none' && style.visibility !== 'hidden') {
    link.remove();
  }
});

Output:

Only visible links are removed. Hidden links remain untouched.

Bonus: Replace Links with Plain Text

Description:

Instead of removing the link entirely, you might want to keep its text content.

document.querySelectorAll('a').forEach(function(link) {
  const textNode = document.createTextNode(link.textContent);
  link.parentNode.replaceChild(textNode, link);
});

Output:

Links are replaced with plain text. No clickable elements remain.

Why Might You Need This?

• To sanitize user-generated content
• For print-friendly pages (no need for navigation)
• To prevent outbound link tracking
• To dynamically update sections without affecting layout flow

Conclusion

Removing all links from a document with JavaScript is straightforward once you understand how the DOM works. By leveraging methods like querySelectorAll, getElementsByTagName, and conditional removal, you can tailor the process to suit various needs.

Explore these methods to see which best fits your use case, and remember—DOM manipulation is a powerful tool, so use it wisely!