10 jQuery Features You Can Replace with Native APIs

Still loading jQuery for a handful of convenience methods? Modern browsers ship with native APIs that handle most jQuery patterns directly—often with better performance and capabilities jQuery never offered.

This guide covers ten common jQuery features you can confidently replace with vanilla JavaScript. Each replacement works across all evergreen browsers, requires no polyfills, and gives you one less dependency to maintain.

DOM Selection with querySelector

jQuery’s $() selector made DOM queries simple. Native JavaScript now matches that simplicity:

// jQuery
$('.menu-item')
$('#header')

// Native
document.querySelectorAll('.menu-item')
document.querySelector('#header')

The native methods accept any valid CSS selector. Use querySelector for single elements, querySelectorAll for collections. Both work on any element, not just document, making scoped queries straightforward.

Class Manipulation with classList

The classList API replaces jQuery’s class methods with cleaner syntax:

// jQuery
$el.addClass('active')
$el.removeClass('active')
$el.toggleClass('active')
$el.hasClass('active')

// Native
el.classList.add('active')
el.classList.remove('active')
el.classList.toggle('active')
el.classList.contains('active')

Native classList also supports multiple classes in a single call: el.classList.add('active', 'visible'). The replace() method swaps classes atomically—something jQuery required two calls to accomplish.

Event Handling with addEventListener

Replace jQuery’s event binding with addEventListener:

// jQuery
$el.on('click', handler)
$el.off('click', handler)

// Native
el.addEventListener('click', handler)
el.removeEventListener('click', handler)

Native event handling offers capabilities jQuery doesn’t expose cleanly. The passive option improves scroll performance, and once automatically removes the listener after first invocation:

el.addEventListener('scroll', handler, { passive: true })
el.addEventListener('click', handler, { once: true })

DOM Traversal with closest

jQuery’s closest() method finds the nearest ancestor matching a selector. The native equivalent works identically:

// jQuery
$el.closest('.container')

// Native
el.closest('.container')

Combine with optional chaining for safer traversal: el.closest('.container')?.querySelector('.child').

Network Requests with fetch

The Fetch API replaces jQuery’s AJAX methods with a promise-based interface:

// jQuery
$.ajax({ url: '/api/data' }).done(callback)

// Native
fetch('/api/data')
  .then(response => response.json())
  .then(callback)

Fetch provides request cancellation via AbortController—functionality jQuery never offered natively.

Form Data with FormData API

Serializing forms no longer requires jQuery:

// jQuery
$('form').serialize()

// Native
const formData = new FormData(formElement)

The FormData API handles file uploads directly and integrates seamlessly with fetch. If you need a query string similar to jQuery’s serialize(), pass the FormData instance to URLSearchParams.

Element Removal with remove()

Removing elements became simpler with native remove():

// jQuery
$el.remove()

// Native
el.remove()

No more parentNode.removeChild(el) gymnastics.

Iterating Collections

jQuery automatically iterates over collections. Native JavaScript uses standard array methods:

// jQuery
$('.items').each(function() { /* ... */ })

// Native
document.querySelectorAll('.items').forEach(el => { /* ... */ })

NodeList.forEach() works directly. For array methods like map or filter, spread into an array: [...document.querySelectorAll('.items')].

Animation with CSS and Web Animations API

CSS transitions handle most animation needs. For programmatic control, the Web Animations API provides what jQuery’s animate() offered—plus better performance:

// jQuery
$el.animate({ opacity: 0 }, 300)

// Native
el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 300 })

The native API can run animations off the main thread when they are compositor-friendly.

Document Ready

Replace jQuery’s ready handler with DOMContentLoaded:

// jQuery
$(document).ready(handler)

// Native
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', handler)
} else {
  handler()
}

Or place scripts at the end of <body> with the defer attribute and skip ready checks entirely.

Conclusion

Removing jQuery from a codebase doesn’t require a complete rewrite. Start with new code—use native APIs by default. For existing jQuery usage, tools like You Might Not Need jQuery help identify straightforward replacements.

Modern DOM APIs aren’t just jQuery alternatives—they’re often the better choice. They’re faster, offer more control, and ship with every browser your users already have.

FAQs

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.