Hide a link with a specific class and attribute

StackOverflow https://stackoverflow.com/questions/614064

  •  03-07-2019
  •  | 
  •  

Question

I have this html.

<a class="link" href="www.website.com?id=233253">test1</a>
<a class="link" href="www.website.com?id=456456">test2</a>

How can I hide one of these links by using the href attribute, and just the last numbers (233253), to hide the link with this href attribute and the class "link"?

This is not a working code, just something i put together to explain it better. getElementsByTagName('a').class('link').href="*233253"

Update: Unfortunately it has to be pure javascript, not using a library, and it has to work on IE6.

Update2: I don't have access to the html

Was it helpful?

Solution 

<html>
<head>
<script type="text/javascript">

function hideLinks(className, ids) {
    var links = document.getElementsByTagName("a");
    var max   = links.length;

    for (var i=0; i<max; i++) {
        var link   = new RegExp("(\s*)"+ className +"(\s*)");
        var isLink = link.test(links[i].className);

        if (isLink) {
            for (var j=0; j<ids.length; j++) {
                var regexp = new RegExp(ids[j] + "$");
                var hasId  = regexp.test(links[i].href);

                if (hasId) {
                    links[i].style.display = "none";
                }
            }
        }
    }
}

window.onload = function() {
    hideLinks("link", [233253]);
}
</script>
</head>
<body>

<a class="link" href="www.website.com?id=233253">test1</a>
<a class="link" href="www.website.com?id=456456">test2</a>


</body>
</html>

Edit: I posted a new version after reading your comment about encapsulating the functionality inside a function. This one should work just as well as the previous version.

OTHER TIPS

Using jQuery:

$("a.link[href$='233253']").hide();

The $= attribute selector matches all elements where the selected attribute ends with the given value.

[edit]: code was somewhat sloppy, should work now. Including the split method (see comments).

Loop through the a elements, check href and apply the hiding. Like this:

var refs = document.getElementsByTagName('a');
for (var i=0;i<refs.length;i++) {
       if (
             refs[i].href &&
             refs[i].href.replace(/(\d+$)/,'$1').match('[your value to match]')
          ) {
           refs[i].className = refs[i].className.replace(/link/i,'');
           refs[i].style.display = 'none';
       }
}

OR 

for (var i=0;i<refs.length;i++) {
   var hs = refs[i].href.split(/=/)[1];
   if (  hs.match([your value to match]) ) {
       refs[i].className = refs[i].className.replace(/link/i,'');
       refs[i].style.display = 'none';
   }
}

No offense but creating loops seems like a workaround to me. If you could add unique id's to the links that would obviously be the preferred method.

After that you could use 'getElementById' to set a different class to hide the particular link.

What distinguishes one link from another? If you know that on the server side then add appropriate classnames and which will be hidden, in a static way, from the CSS.

Dynamically determining what needs hiding will require you to dynamically generate your javascript snippet, unless you render this inside the HTML.

Update: If you don't have access to the generated HTML then my post does not help you.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top