Hide Anchor tag based on href URL
Solution 1
You can use document.querySelector
to select bu attribute value like this.I have used no jquery the only javascript is used.
document.querySelector("[href='www.example.com']").style.display = 'none';
<a href="www.example.com" id="someID" style="display:block">Check</a>
<a href="www.example2.com" id="someID" style="display:block">Check</a>
Solution 2
You can make condition
var url = document.getElementsByTagName('a');
if (url.href = "www.example.com")
{
url.style.display = none;
}
It is not exact code. i provided you example .kindly try it and let me know. It is for single . if you have many tags then loop all those
Solution 3
Simply loop through all anchor elements and then check their href
:
var anchors = document.getElementsByTagName('a');
for (var i = 0; i < anchors.length; i++) {
if (anchors[i].href == 'https://example.com/') {
anchors[i].style.display = 'none';
}
}
<a href="https://example.com/" id="someID">Check</a>
<a href="https://example2.com/" id="someID">Check</a>
Solution 4
You can use javascript to do the job. Use querySelector
to get all the elements with same id
. Then loop the ids
and compare the href
link value.
<script>
var elements = document.querySelectorAll("[id='someID']");
for(var i = 0; i < elements.length; i++) {
if (elements[i].getAttribute("href") === "www.example.com") {
elements[i].style.display='none';
}
}
</script>
Comments
-
Asim almost 2 years
I was wondering if there is a possibility to HIDE anchor tags that refer to a particular URL. I know there is possible to hide based on id like this with JavaScript:
document.getElementById('someID').style.display = 'none';
<a href="#" id="someID" style="display: none">Check</a>
But let's say I want to hide all anchor tags based on URL example: www.example.com
<a href="www.example.com" id="someID" style="display: none">Check</a> <a href="www.example2.com" id="someID" style="display: none">Check</a>
I want to hide the first anchor tag, not the second that refers to example2.com
Is this possible with pure JavaScript and not jQuery?
-
Asim over 6 years@Ayush No, i want to hide all the a href elements that have url=example.com and not url=example2.com. the ID can be same ("someID")
-
-
Asim over 6 yearsYour answer was very like @Mayank's answer. I think your code and his are doing the same thing? Loop all anchor tags then if found href=example.com then hide it. or am i wrong?
-
Mayank Patel over 6 yearsGlad it helps you.
-
Asim over 6 yearsThis will work, but if i have different ID on some places this code will not work. Ive formulated the question wrong sorry but @Mayank's answer covers this issue :) thanks anyway
-
Ethan over 6 years@Asim It ends up doing the same thing, but in a different way. My solution gets all of the
<a>
elements, loops through them and checks each to see if the href is matching. @Mayanak's answer actually uses a nifty CSS selector which selects all elements with a href ofwww.example.com
, then simultaneously sets all of the displays to none. Their answer is actually much better and more efficient, I didn't think of it. -
Ayush over 6 years@Asim No problem. :)