0

I have a page that I am trying to remove an element of with this section of code

oldContainer = $('div.choose-location-options');
oldContainer.addClass('hidden');

I am using the $ selector because I read online and in this answer that $ is short for document.querySelector, this code is working fine.
During code review my colleagues have told me that they do not want us using the $ is not best practice because it looks like jquery. So I changed it to this.

oldContainer = document.querySelector('div.choose-location-options');
oldContainer.addClass('hidden');

However this code will return an error message saying that cannot add class to undefined
Running this code in the browser will also remove the oldContainer so I thought it was an issue with the page loading so I added an event listener to the code for a page load

window.addEventListener('load', (event) => {
   oldContainer = $('div.choose-location-options');
   oldContainer.addClass('hidden');
});

This also returns undefined So I know it is not a timing issue. Why is the shorthand $ working but not the document.querySelector?

Nestor Daniel Ortega Perez
  • 1,046
  • 3
  • 10
imstupidpleasehelp
  • 1,618
  • 2
  • 16
  • 36
  • `$` is not defined by the browser, mostly it **is** jquery, which wraps each element into its own object. what you want is `oldContainer.classList.add('hidden')` in vanilla. also $('selector') will alays return an object. maybe the iterator is empty. the vanilla can return undefined. that why u also need to check for existence. – Sysix Jun 13 '22 at 21:12
  • 4
    `addClass()` is a jQuery method, not a DOM method. – Barmar Jun 13 '22 at 21:12
  • 2
    *I read online and in || that $ is short for document.querySelector* <-- That's incorrect. You are using JQuery and `$(some selector)` is ***similar***, but not exactly the same as `document.querySelectorAll()`. – Scott Marcus Jun 13 '22 at 21:13
  • "*I am using the $ selector because I read online and in || that $ is short for document.querySelector,*" not really? What is `||`? `$` only has special meaning in the console. If you're using this in your regular code, then there is something that's defining it. And it might be jQuery. "*an error message saying that cannot add class to undefined*" please cite *the exact* message. – VLAZ Jun 13 '22 at 21:13
  • 1
    " ...my colleagues have told me that they do not want us using the $ is not best practice because it looks like jquery." This is just nonsense. `$` is just a valid JS identifier. – Ram Jun 13 '22 at 21:13
  • jQuery doesn't report an error if a selector doesn't match anything. It's more like `querySelectorAll()` followed by a `forEach()` loop. An empty match just means that the loop is empty. – Barmar Jun 13 '22 at 21:15
  • Barmar is correct, it turns out the issue was `addClass()` instead of `classList.add` And VLAZ the link is now added where || was, apologies for not fixing that before submitting. – imstupidpleasehelp Jun 13 '22 at 21:17
  • `addClass` in the DOM version should have reported an error that the method doesn't exist, not that you can't add the class. – Barmar Jun 13 '22 at 21:18
  • And if `oldContainer` is undefined, you'll also get an error from `oldContainer.classList.add()`. – Barmar Jun 13 '22 at 21:19

0 Answers0