How to delete the Location Hash from a URL with JavaScript or jQuery

Question

How to delete the Location Hash from a URL with JavaScript or jQuery

I have encountered a unique issue not addressed in previous discussions.

When the destination id is on a different page, I am experiencing difficulty removing #url.

My Approach : On two HTML pages - index.html & about.html, I have displayed various menu information by utilizing

<div id="one"></div>

on the index.html page instead of creating separate pages for each menu item. In an attempt to eliminate #url when clicked, I experimented with the following lines individually:

history.pushState('', document.title, window.location.pathname);

var target = $(this.target);

Unfortunately, the #url is only disappearing on the index.html page. When clicking on menu items on the about.html page, the #url remains visible (due to the

<div id=""></div>

being present on index.html). Could anyone assist me in resolving this issue and removing #url even if the destination id is located on a different page?

javascript html jquery css

Answer 1

Answer №1

It seems like you are dealing with two pages that have the same navigation structure but one of them lacks the elements referenced by anchor tags with hash values, such as #target. In this scenario, the hash serves no purpose on the page without the corresponding elements, for instance:

<div id="target">

.

If this is indeed your situation, the code snippet below may be useful. It extracts the hash value from the page URL and attempts to locate the element associated with that hash. If the element does not exist on the page, the script will update the URL accordingly. Simply place this script on each page and execute it immediately.

var hash = location.hash;
var $targets = $(hash);
if (!$target.length) {
  history.pushState('', document.title, location.pathname);
}

Answer 2

It seems like you are dealing with two pages that have the same navigation structure but one of them lacks the elements referenced by anchor tags with hash values, such as #target. In this scenario, the hash serves no purpose on the page without the corresponding elements, for instance:

<div id="target">

.

If this is indeed your situation, the code snippet below may be useful. It extracts the hash value from the page URL and attempts to locate the element associated with that hash. If the element does not exist on the page, the script will update the URL accordingly. Simply place this script on each page and execute it immediately.

var hash = location.hash;
var $targets = $(hash);
if (!$target.length) {
  history.pushState('', document.title, location.pathname);
}

How to delete the Location Hash from a URL with JavaScript or jQuery

Answer №1

Similar questions

the ultimate guide to leveraging a single slot to edit various columns within data tables

Is it possible for parameters to still be filled even when they start off empty

"Exploring the world of Material UI styling with ReactJS: A deep dive

Having trouble opening the prompt window by clicking on the button

Unlocking the Power of ReactJS: Passing Values in Material UI for Advanced JSON Structures

Empty Canvas: Google Charts Graph Fails to Populate

Encountering issues with parsing normals in THREE.js json mesh format

Can ngFor be utilized within select elements in Angular?

Creating a unique theme for horizontal layout on Tumblr

Strategies to manage or prevent a timezone offset while deploying a Next.js application on Vercel

When utilizing PassportJS, SequelizeJS, and JWT tokens, req.user may be found to be undefined

Include a "remember me" feature in the Stripe form

Preventing the Express server from becoming unresponsive while processing a GET request

Enhance Compatibility: IE11 URL Polyfill

The issue of duplicated elements arises when Ajax is utilized within Django

Liquid backdrop centered immobile elements

How can I ensure that changes made to a div in ASP.NET remain persistent during postback?

Enhancing Data Tables with Jquery: Implementing Column Filtering for Multiple Elements within Table Cells

Adjust the pagination length within the jQuery DataTables plug-in

CSS Word Breaker: Shattering Text into Pieces