How to hide an anchor tag by the #id of the href

Question

I have different anchor tags with href=#ids.I would like a new value of href without the anchor at the end. Meaning, I do not want the anchor to appear on the search bar. However, I would styling of the id to come in to play.

Currently, in my CSS, I have the following styling that will highlight the background of a particular section when you select, let say Spanish link:

CSS:

#Espanol:target{
     background-color: #ffa;
    -webkit-transition: all 1s linear;
}

I would like that to still affect the section but not have the anchor to appear in the href.

a[href='##Non-Discrimin'] {
  display: none
}

<li class="langLI" style="list-style-type:none"><a href="/Regal-en-us/non-discrimination-and-language-assistance##Non-Discrimin">English</a></li>

The reason for the two "##" is I am using coldfusion and site crashes if I just use 1 '#'. Is there another approach I can do to hide the anchors to not display? Currently it displays as follows:

/Regal-en-us/non-discrimination-and-language-assistance/#Non-Discrimin

I would like the anchor to not display at the end:

/Regal-en-us/non-discrimination-and-language-assistance/

Answer 1

You cannot do this with pure CSS, you need some JS. Here is a jQuery solution :

$('a').each(function() {
  $(this).attr('href', $(this).attr('href').split('#')[0]);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="langLI" style="list-style-type:none"><a href="/Regal-en-us/non-discrimination-and-language-assistance##Non-Discrimin">English</a></li>

This will apply to all a tag, to be more specific you can change the selector.

Answer 2

In order to remove the matching string from the end of the href attribute-value you'll need to use JavaScript (or a back-end server-side scripting language if you prefer):

// advance apologies for the clunky name
function removeFromAttributeByString(opts) {

  // initialising an object with the default names,
  // albeit all Object key-values are false at this
  // time (but sensible defaults could be used if
  // you prefer):
  let defaults = {
      'needle': false,
      'attribute': false,
      'haystackSelector': false
    },
    haystack;

  // iterating over the keys of the opts Object if supplied,
  // or an empty Object if opts is not supplied (this is simply
  // to prevent an error message in the absence of a supplied
  // Object) using Object.keys() and Array.prototype.forEach():
  Object.keys(opts || {}).forEach(

    // an Arrow function where we supply the current Object-key
    // ('key') to the function, and set the key-value for the
    // defaults Object to be equal to the key-value supplied
    // via the opts Object passed to the function:
    key => defaults[key] = opts[key]
  );

  // here we use the Object.values() method to retrieve an
  //  array of the defaults Object's values, and iterate over
  // that array using Array.prototype.every() with the Boolean
  // argument, testing that every value is Boolean true and,
  // if so, returning true:
  if (Object.values(defaults).every(Boolean)) {

    // here we find all elements that match the supplied CSS
    // selector (defaults.haystackSelector) and then use
    // Array.from() to convert that array-like nodeList into
    // an Array:
    haystack = Array.from(
                 document.querySelectorAll( defaults.haystackSelector )
               );

    // we filter that array, using Array.prototype.filter():
    haystack.filter(

      // using an Arrow function to pass the current element of
      // the array to the function, and if the current element
      // has the supplied attribute (defauls.attribute) it's
      // retained in the returned Array, otherwise it's discarded:
      element => element.hasAttribute(defaults.attribute)

    // using Array.prototype.forEach() to iterate over the array
    // of elements retained:
    ).forEach(

      // here we set the attribute-value to the same attribute-value
      // after we remove the supplied text ('defaults.needle') from
      // attribute-value:
      element => element[defaults.attribute] = element[defaults.attribute].replace(defaults.needle, '')
    );

  }

}

removeFromAttributeByString({
  'needle': '##Non-Discrimin',
  'attribute': 'href',
  'haystackSelector': 'a'
});

function removeFromAttributeByString(opts) {
  let defaults = {
      'needle': false,
      'attribute': false,
      'haystackSelector': false
    },
    haystack;

  Object.keys(opts || {}).forEach(
    key => defaults[key] = opts[key]
  );

  if (Object.values(defaults).every(Boolean)) {

    haystack = Array.from(document.querySelectorAll(defaults.haystackSelector));
    haystack.filter(
      element => element.hasAttribute(defaults.attribute)
    ).forEach(
      element => element[defaults.attribute] = element[defaults.attribute].replace(defaults.needle, '')
    );

  }

}

removeFromAttributeByString({
  'needle': '##Non-Discrimin',
  'attribute': 'href',
  'haystackSelector': 'a'
});

<ul>
  <li class="langLI" style="list-style-type:none"><a href="/Regal-en-us/non-discrimination-and-language-assistance##Non-Discrimin">English</a></li>
</ul>

References:

• Array.from().
• Array.prototype.every().
• Array.prototype.filter().
• Array.prototype.forEach().
• Array.prototype.map().
• Arrow Functions.
• document.querySelectorAll().
• Element.hasAttribute().
• Object.keys().
• Object.values().