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
$(el).find('input');

// vanilla
el.querySelector('input');

$.prop()

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;

$.parent()

Use parentElement

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

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

$.data()

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.

$.remove()

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
$('.goAway').remove();

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

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

Use classList

// jQuery
$('.is-active').removeClass('is-active');
$('.homepage').addClass('is-active');
$('.homepage').toggleClass('is-active');
$('.homepage').hasClass('is-active');

// vanilla
document.querySelector('.is-active').classList.remove('is-active');
document.querySelector('.homepage').classList.add('is-active');
document.querySelector('.homepage').classList.toggle('is-active');
document.querySelector('.homepage').classList.contains('is-active');

$.show() / $.hide()

Edit the CSS 'display' property:

// jQuery
$('.hideMe').hide();
$('.showMe').show();

// 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';

$.empty()

Loop over element's children and remove them.

// jQuery
$('.content').empty();

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

// you can either loop
while (el.firstChild) {
    el.removeChild(this.el.firstChild);
}

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

$.append()

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
$('.el').append('<div>hello</div>');

// 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
el.appendChild(content[0]);