What are the native JavaScript equivalents of common jQuery operations?

Summary

$(sel) becomes document.querySelectorAll(sel); .addClass/.removeClass/.toggleClass become el.classList.add/remove/toggle; .on() becomes addEventListener (delegation via event.target.closest(sel)); .closest() is el.closest(); .text() / .html() are textContent / innerHTML; .attr() is getAttribute/setAttribute; .data() is el.dataset; $.ajax is fetch; and $(fn) is DOMContentLoaded or a defer script.

Longer Answer

document.querySelector("#orders").addEventListener("click", (e) => {
  const btn = e.target.closest(".delete-order");
  if (!btn) return;
  e.preventDefault();
  deleteOrder(btn.dataset.id);
});

Differences to remember: querySelectorAll returns a static NodeList (use forEach or spread it), native methods do not apply to a whole collection automatically, and fetch does not reject on HTTP errors, so check response.ok.

Key Points

• querySelectorAll, classList, closest, dataset.
• addEventListener + closest for delegation.
• fetch instead of $.ajax.
• Collections and fetch errors behave differently.