0

I am collaborating on a project with two acquaintances and I was asked to keep my selectors to either vanilla JavaScript like

document.getElementById("thisDiv");

or jQuery selectors like

$("#thisDiv");

in order to maintain consistency. I decided to use jQuery selectors then ran into an issue where classList that works with vanilla JavaScript selectors does not seem to work with the jQuery equivalent. 

document.getElementById("thisDiv").classList.remove("hidden");

works, where as

$("#thisDiv").classList.remove("hidden");

does not. Is there an equivalent I can use for jQuery selectors?

Axel
  • 3,331
  • 11
  • 35
  • 58
JakeofSpades
  • 892
  • 1
  • 8
  • 18
  • 2
    Use `removeClass` - https://api.jquery.com/removeclass/ . Your code becomes `$("#thisDiv").removeClass("hidden")` – Phani Kumar M Oct 15 '17 at 04:55
  • Thank you. If you submit it as an answer I will select it as so. – JakeofSpades Oct 15 '17 at 04:58
  • 6
    It makes me really happy knowing that in 2017, the decade-old "what is the vanilla JS equivalent of jQuery addClass/removeClass?" trope has *finally* been [inverted](http://tvtropes.org/pmwiki/pmwiki.php/Main/InvertedTrope). – BoltClock Oct 15 '17 at 05:03

2 Answers2

5

Roughly speaking, you can think of jQuery as a set of functions designed for DOM manipulations. Technically, this is what we call an API (Application Programming Interface). As you already know, your web browser provides a builtin API similar to the jQuery API. Although both APIs serve the same purpose there are some key differences :

  1. The jQuery API is built upon the browser's builtin API.
  2. Unlike the builtin API, the jQuery API works the same in any browser.
  3. The APIs structures and naming conventions differ quite a lot.

The last point means that you can't expect to find the exact same functions from one API to the other, in other words, you have to read the manual.

Here is a little help : http://api.jquery.com/category/manipulation/class-attribute :-)

Another option is to ask the browser's console. If you are using Chrome (Firefox should work the same), press F12, open the "Console" panel, and try to guess the name of the function you are looking for. The console will help by showing a list of names that match with what you are typing. The jQuery API is located at $.fn :

autocomplete

Of course jQuery must be loaded in the current page, which is the case on Stackoverflow. As you can see, there is a function called removeClass, and you can call it this way :

$("#thisDiv").removeClass("hidden")
  • That is excellent information about the console within a browser's dev tools. Way to teach a man how to fish! – JakeofSpades Oct 15 '17 at 20:15
  • This answer, though accepted, does not answer the question that was asked. While it provides a workaround for a specific use case, and some background on jQuery in general, it does not attempt to answer whether jQuery does or does not have an equivalent for vanilla classList – mattthew Sep 06 '20 at 05:31
1

There is no vanilla jQuery equivalent to the vanilla JavaScript classList.

The only option for a jQuery equivalent is to add a plugin function to vanilla jQuery that does something like classList does.

I found suggested code for such a plugin here, and here. They both do slightly different things, but both return a regular array of class names rather than a DOMtokenList, so they doesn't support adding or removing classes from the element in the same format as using classList. But, as noted above by @Phani Kumar M, you don't need the class list to use vanilla jQuery add() or remove() methods.

Of course, jQuery isn't needed at all for getting a class list, but a jQuery function for doing so might be desirable for IE 9 and below (which don't support classList), for code clarity/brevity, for convenience, or just for personal aesthetic reasons.

mattthew
  • 528
  • 4
  • 11