Replace jQuery with Vanilla JavaScript
Due to a modern trend of replacing jQuery with native JavaScript, you might consider this to modernize your application and reduce dependencies.
Steps to Remove jQuery
Analyze the Use of jQuery:
Search your code for $ and jQuery to identify where jQuery is being used.
Replace jQuery with Vanilla JavaScript:
Most jQuery functions have corresponding Vanilla JavaScript alternatives.
Here are some examples of how to replace jQuery with Vanilla JavaScript:
Examples
jQuery: DOM-Ready
$(document).ready(function () {
// Code here
});
Vanilla JavaScript:
document.addEventListener('DOMContentLoaded', function () {
// Code here
});
jQuery: DOM Selection
var element = $('#elementId');
Vanilla JavaScript:
var element = document.getElementById('elementId');
jQuery: Change CSS
$('#elementId').css('color', 'red');
Vanilla JavaScript:
document.getElementById('elementId').style.color = 'red';
jQuery: Add Event Listener
$('#elementId').on('click', function () {
// Code here
});
Vanilla JavaScript:
document.getElementById('elementId').addEventListener('click', function () {
// Code here
});
Example: Replacing jQuery with Vanilla JavaScript
Before:
$(document).ready(function () {
$('#button').click(function () {
alert('Button clicked');
});
});
After:
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('button').addEventListener('click', function () {
alert('Button clicked');
});
});