title: How to remove href attribute if the link matches current webpage URL?
body: <p>I have a static file called <code>header.html</code>, which is embedded in my Java servlet and is displayed on top of all the webpages generated by the servlet -</p>
  <p><a href="https://i.stack.imgur.com/1jS1b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1jS1b.png" alt="screenshot" /></a></p>
  <p>It displays an UL list acting as a navigation menu.</p>
  <p>It is displayed same on all pages, but if a page is already displayed, I would like to remove the link pointing to it.</p>
  <p>Unfortunately, my code does not work.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
      $("a[href='" + window.location.href + "']").removeAttr("href");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.center {
      width: 100%;
      text-align: center;
  }
  
  #navigation {
      display: inline;
      margin: 0;
      padding: 0;
  }
  
  #navigation &gt; li {
      display: inline;
      padding: 8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;h1 class="center"&gt;My web page&lt;/h1&gt;
  &lt;h3 class="center"&gt;My motto&lt;/h3&gt;
  
  &lt;div class="center"&gt;
      &lt;ul id="navigation"&gt;
          &lt;li&gt;&lt;a href="/en/ws/"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/en/ws/top"&gt;Top&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="https://stackoverflow.com/questions/68853864/how-to-remove-href-attribute-if-the-link-matches-current-webpage-url"&gt;Stackoverflow&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/en/ws/android"&gt;Android&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/en/ws/ios"&gt;iOS&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>It works when I use a hardcoded URL, but not when I try to replace it by <code>window.location.href</code></p>
  <p>Please suggest a better jQuery code. If the selector <code>a[href='&quot; + window.location.href + &quot;']&quot;</code> cannot be used, then should I maybe iterate through the links, which are children of <code>#navigation</code> and then remove <code>href</code> if it matches the current page URL? And how to make it work with relative URLs (like <code>/en/ws/android</code>)?</p>
  <p><strong>UPDATE:</strong></p>
  <p>And here is the link to my <a href="https://wordsbyfarber.com/en/ws/android" rel="nofollow noreferrer">real webpage</a> where my code fails to work.</p>