3

With my little knowledge of JavaScript, I'm trying to remove the href links on the name and title text when hovering over an image: http://www.equiuspartners.com/site/our-team/

What I thought would work:

document.querySelectorAll("h3.the-title a, div.portfolio-categories a").removeAttribute("href");

Only seems to actually work when given an array value:

document.querySelectorAll("h3.the-title a, div.portfolio-categories a")[0].removeAttribute("href");

Which, by logic, only does the first instance.

Why is it not allowing me to disable all links with the first method?

Improve this question
1
  • because collections do not have those methods. Commented Feb 11, 2016 at 21:48

2 Answers 2

Reset to default
5

querySelectorAll returns a nodeList, an array-like object containing all the elements that could be a match for the given selector, not a single element.

You'd have to iterate to remove the attribute on all those elements

var elems = document.querySelectorAll("h3.the-title a, div.portfolio-categories a"); for (var i=0; i<elems.length; i++) { elems[i].removeAttribute("href"); }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Any chance you could explain this code in english to me for a better understanding?
In English, querySelectorAll returns something that looks like an array, even if it's really not, that's why you can access it with [0] etc. As it's not just one element, but possibly multiple elements, you have to use a loop and access each element inside the loop, because removeAttribute only works on one element at a time.
4

That's how it is, document.querySelectorAll() returns a collection, not a single element. In modern browsers, you can use this to remove all attributes from all matched elements:

Array.from(document.querySelectorAll(<selector>)) .forEach(e => e.removeAttribute('href'));

Please note that you can use arrow functions and Array.from() in latest chrome and firefox only, (though there's a polyfill for Array.from available at above link.)

Improve this answer

7 Comments

@epascarello - Michael seems to live in the future, all his answers use ES2015 that the rest of us will be able to use in production in a year or two.
@adeneo Sorry, I'm using mainly node.js, where the future is now... ;-) But you're right, your answer is better for a browser environment.
All your answers pretty much use ES2015, even straight forward clientside stuff, I pay attention. I don't really care, these days it seems to be fine, and arrow functions are neat and all, but usually the rest of us would add a notice that currently the answer only works in the latest Chrome and Firefox.
You guys are amazing. I'm learning so much, and I appreciate y'all taking up my lazy, ignorant questions. Connecting the dots.
@adeneo I get your point. Thanks for pointing me towards it - I'll start to point it out very clearly if I use ES2015 or will use more cross-browser compatible code from now on! BTW arrow functions are really neat :)
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.