Stop Using jQuery: A 10-Minute Migration Guide for Stubborn Devs

TL;DR

jQuery was revolutionary, but modern browsers have natively adopted its best features. You can now select elements with querySelector, fetch data with the Fetch API, and manipulate classes with classList—all without the overhead of a 30KB+ library. Migrating to Vanilla JavaScript drastically improves site performance, reduces bundle size, and future-proofs your codebase. This guide breaks down the most common jQuery patterns and their modern JavaScript equivalents so you can start migrating today.

Introduction: The End of an Era

Let’s be honest for a second. If you started web development anytime between 2006 and 2015, jQuery wasn't just a library—it was a lifeline. It smoothed over the nightmare of cross-browser compatibility, gave us the legendary $ selector, and made Ajax calls actually bearable to write. You probably have a lot of fond memories of writing $('#app').slideDown().

But here is the harsh reality of web development in 2026: You no longer need jQuery.

Modern web browsers have evolved tremendously. The ECMAScript standards have caught up, and the DOM API is now robust, intuitive, and incredibly fast. The features that once made jQuery indispensable—DOM traversal, event handling, animations, and asynchronous requests—are now built directly into the language.

By clinging to jQuery, you are unnecessarily inflating your bundle size, slowing down your time-to-interactive (TTI), and writing code that is fundamentally outdated. If you're looking to optimize your site's speed—something we discussed extensively in our guide on Core Web Vitals Optimization—dropping jQuery is one of the easiest wins available.

In this guide, we are going to walk through a 10-minute migration strategy for stubborn devs. We will take your favorite jQuery patterns and translate them into clean, performant Vanilla JavaScript.

Why We Held Onto jQuery (And Why We Must Let Go)

Before we start ripping out code, let's acknowledge why migrating feels so hard. jQuery's syntax is undeniably elegant. The ability to chain methods together—$('.btn').addClass('active').show()—feels incredibly powerful. Furthermore, many legacy codebases and older WordPress themes are deeply entangled with jQuery plugins (we're looking at you, Slick Carousel and Select2).

However, the cost of keeping it around is no longer justifiable:

1. Bundle Size: Even minified and gzipped, jQuery adds significant weight to your page. In an era where mobile performance dictates SEO rankings, every kilobyte matters.
2. Performance Overhead: jQuery acts as a wrapper around native DOM methods. Every time you use $(), you are introducing an abstraction layer that slows down execution. Native methods are inherently faster.
3. Ecosystem Shift: The modern JavaScript ecosystem has moved on. Frameworks like React, Vue, and Svelte (and even modern vanilla architectures) handle DOM updates declaratively. Using imperative jQuery mutations alongside these frameworks often leads to maddening bugs.

If you are looking to level up your JavaScript skills, investing in high-quality education is paramount.

Selecting Elements: The Modern Approach

The most iconic feature of jQuery is the dollar sign selector. Fortunately, modern JavaScript has a one-to-one replacement that is just as powerful.

Selecting a Single Element

The jQuery Way:

const header = $('#main-header');
const activeItem = $('.nav-item.active');

The Vanilla JS Way:

const header = document.querySelector('#main-header');
const activeItem = document.querySelector('.nav-item.active');

The querySelector method takes any valid CSS selector and returns the first matching element. It’s exactly like $(), just a bit more verbose.

Selecting Multiple Elements

The jQuery Way:

const buttons = $('.btn-primary');

The Vanilla JS Way:

const buttons = document.querySelectorAll('.btn-primary');

querySelectorAll returns a NodeList. Unlike jQuery objects, NodeLists don't inherently have array methods like map or filter (though they do support forEach in modern browsers). If you need full array methods, you can easily convert it:

const buttonArray = Array.from(document.querySelectorAll('.btn-primary'));
// or using spread syntax
const buttonArray = [...document.querySelectorAll('.btn-primary')];

DOM Manipulation and Traversal

jQuery made adding, removing, and finding elements a breeze. The native DOM API has completely caught up here with methods like append(), prepend(), before(), and after().

Appending Content

The jQuery Way:

$('#container').append('<p>New content</p>');

The Vanilla JS Way:

// Method 1: insertAdjacentHTML (Fast and flexible)
document.querySelector('#container').insertAdjacentHTML('beforeend', '<p>New content</p>');

// Method 2: Creating an element (Safer against XSS)
const p = document.createElement('p');
p.textContent = 'New content';
document.querySelector('#container').append(p);

We highly recommend checking out our post on Preventing XSS in JavaScript Applications for more details on why createElement is generally safer than injecting raw HTML strings.

Finding Child Elements

The jQuery Way:

const links = $('#nav').find('a');

The Vanilla JS Way:

const links = document.querySelector('#nav').querySelectorAll('a');

You don't have to query from the document root every time. You can call querySelector on any specific DOM node!

Getting Parents and Siblings

The jQuery Way:

const parent = $('.child').parent();
const closestDiv = $('.child').closest('div');
const nextSibling = $('.item').next();

The Vanilla JS Way:

const child = document.querySelector('.child');
const parent = child.parentNode;
const closestDiv = child.closest('div'); // Yes, native closest() exists!
const nextSibling = child.nextElementSibling;

Working with Classes and Attributes

The classList API is one of the greatest additions to modern JavaScript, completely eliminating the need for jQuery's class manipulation methods.

The jQuery Way:

$('#menu').addClass('open');
$('#menu').removeClass('hidden');
$('#menu').toggleClass('active');
const hasClass = $('#menu').hasClass('open');

The Vanilla JS Way:

const menu = document.querySelector('#menu');

menu.classList.add('open');
menu.classList.remove('hidden');
menu.classList.toggle('active');
const hasClass = menu.classList.contains('open');

For custom attributes, the transition is equally straightforward:

The jQuery Way:

const role = $('#btn').attr('role');
$('#btn').attr('disabled', 'disabled');
$('#btn').removeAttr('disabled');

The Vanilla JS Way:

const btn = document.querySelector('#btn');

const role = btn.getAttribute('role');
btn.setAttribute('disabled', 'disabled');
btn.removeAttribute('disabled');

Event Handling

jQuery's .on() and .off() methods were lifesavers for cross-browser event handling. Today, addEventListener works flawlessly everywhere.

The jQuery Way:

$('#submit-btn').on('click', function(e) {
  e.preventDefault();
  console.log('Clicked!');
});

The Vanilla JS Way:

document.querySelector('#submit-btn').addEventListener('click', function(e) {
  e.preventDefault();
  console.log('Clicked!');
});

Event Delegation

Event delegation is crucial for performance and handling dynamically added elements. jQuery made this easy by passing a selector to the .on() method.

The jQuery Way:

$('#list').on('click', 'li', function(e) {
  console.log('List item clicked!');
});

The Vanilla JS Way:

document.querySelector('#list').addEventListener('click', function(e) {
  if (e.target.matches('li') || e.target.closest('li')) {
    console.log('List item clicked!');
  }
});

By using e.target.matches() or e.target.closest(), we can achieve the exact same robust event delegation in vanilla JS.

The Death of $.ajax(): Enter Fetch API

Perhaps the biggest reason developers clung to jQuery was $ .ajax(). XMLHttpRequest was notoriously awful to write. Fortunately, the native Fetch API is elegant, promise-based, and built into every modern browser. (If you prefer a dedicated library, Axios is a fantastic modern alternative, which we compare in our Fetch vs Axios article).

The jQuery Way:

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(err) {
    console.error(err);
  }
});

The Vanilla JS Way (Promises):

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

The Modern Vanilla JS Way (Async/Await):

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

Async/await syntax makes asynchronous code look synchronous and incredibly easy to read.

Document Ready

Finally, the classic $(document).ready(). You needed this to ensure the DOM was fully parsed before your scripts ran.

The jQuery Way:

$(document).ready(function() {
  // Your code here
});

// Or the shorthand:
$(function() {
  // Your code here
});

The Vanilla JS Way:

document.addEventListener('DOMContentLoaded', function() {
  // Your code here
});

The Better Modern Way: Just put your <script> tag at the bottom of the <body>, or use the defer attribute in your <head>:

<script src="app.js" defer></script>

With defer, the script is downloaded asynchronously but executed only after the DOM has been fully parsed. You don't need a DOMContentLoaded listener at all!

Step-by-Step 10-Minute Migration Strategy

If you have a massive legacy application, you can't just delete the jQuery script tag and hope for the best. Follow this systematic approach:

1. Audit Your Plugins: Make a list of every jQuery plugin your site uses (carousels, datepickers, tooltips). Find modern, vanilla alternatives for them. For instance, Swiper is an excellent replacement for Slick Carousel.
2. Remove jQuery from New Code: Establish a strict rule: all new features must be written in Vanilla JavaScript.
3. Migrate Utility Functions: Replace $.extend(), $.map(), and $.trim() with native Object.assign(), Array.prototype.map(), and String.prototype.trim().
4. Tackle Ajax Calls: Search for $.ajax, $.get, and $.post and replace them with fetch(). This is usually the easiest part to refactor in isolation.
5. Refactor DOM Manipulations: Start replacing $() with querySelector. Focus on one module or component at a time.
6. Drop the Dependency: Once you've scrubbed all references, remove the jQuery script tag and run your test suite.

Conclusion

Migrating away from jQuery isn't just about satisfying a modern development trend; it's about delivering faster, more efficient experiences to your users while writing cleaner, more maintainable code. The language has matured. The APIs are ready.

It might feel daunting to rewrite those familiar $ signs, but once you embrace the native DOM API, you'll wonder why you didn't do it sooner. Your bundle size will shrink, your performance metrics will improve, and you will become a fundamentally stronger JavaScript developer.

Take the leap. Drop jQuery. The modern web is waiting for you.