Here's the vanilla (plain) Javascript versions of some common jQuery functions. I put this cheat-sheet together when I was refactoring some old code and needed to remove jQuery from my code.

Selecting and $.find()

Use querySelector (or querySelectorAll).

// jQuery
var el = $('.hello');

// vanilla
const el = document.querySelector('.hello');

// jquery

// vanilla


Just use or set the attribute directly:

// jQuery
var $el = $('.form');
$el.find('.input').prop('disabled', true)

// vanilla
const el = document.querySelector('.form');
el.querySelector('.input').disabled = true;


Use parentElement

// jQuery
var $parent = $('.child').parent();

// vanilla
const parent = document.querySelector('.child').parentElement;


Use .dataset

<div class='info' data-some-data='12' />

// jQuery
var info = $('.info').data('some-data'); // 12

// vanilla
const info = document.querySelector('.info').dataset.someData; // 12

Note that dataset transforms the names from hypenated to camelCase, similar to how CSS is treated in JS.


Use .remove(). This won't work in any version of Internet Explorer but does exist in Edge, so for IE removeChild is the one to use.

// jQuery

// vanilla
const el = document.querySelector('.goAway').remove();

$.addClass() / $.removeClass() / $.toggleClass() / $.hasClass()

Use classList

// jQuery

// vanilla

$.show() / $.hide()

Edit the CSS 'display' property:

// jQuery

// vanilla
document.querySelector('.hideMe').style.display = 'none';

// use inherit so that your CSS controls block/flex/inline-block etc
document.querySelector('.showMe').style.display = 'inherit';


Loop over element's children and remove them.

// jQuery

// vanilla
const el = document.querySelector('.content');

// you can either loop
while (el.firstChild) {

// or reset innerHTML
// but this is slower and can sometimes cause issues with painting/listeners
el.innerHTML = '';


This is slightly complicated! There are three options:

  1. appendChild: Create an element, add content to it, then append to your parent element.
  2. innerHTML: Immediately adds HTML, but removes any existing content and event handlers. Not recommended.
  3. DOMParser: IE10+, can handle complex templates and nested markup from a string.

Vanilla .append() will just add a string, not markup.

// jQuery

// vanilla

// 1. appendChild
let first = document.createElement('p');
first.innerHTML = 'hello';
el.appendChild(first); // 'first' needs to be an existing element, can't be a string

// 2. innerHTML
this.innerHTML = '<div>hello</div>'; // will remove any existing content

// 3. DOMParser - IE10+, faster than innerHTML
var markup = '<div><p>text here</p></div>';
var parser = new DOMParser()
var content = parser.parseFromString(markup, 'text/html');
// DOMParser returns HTMLDoc, so need to get first child [0] and append that