Vanilla Javascript Closest Without Jquery

Vanilla JavaScript Closest Without jQuery

If you're a web developer who wants to harness the power of JavaScript without relying on jQuery, you've come to the right place. In this article, we'll dive into the concept of the "closest" method in vanilla JavaScript and explore how you can achieve the same functionality that jQuery offers without including the entire library in your project.

The closest() method in jQuery allows you to find the first ancestor of an element that matches a specific CSS selector. Fortunately, replicating this functionality in pure JavaScript is not as daunting as it may seem. Let's walk through a step-by-step guide on how to implement the closest method without jQuery.

1. Understanding the closest() method:
First things first, let's grasp the essence of the closest() method. In its simplest form, closest() searches for the closest ancestor of the selected element that matches a given selector. This can be incredibly useful when you need to navigate through the DOM tree to find a specific parent element.

2. Creating the closestWithoutJQuery function:
To mimic the closest() behavior, we can write a custom function named closestWithoutJQuery. This function will take two parameters: the element you want to start the search from and the selector you're looking for. Here's a basic implementation of this function:

function closestWithoutJQuery(element, selector) {
    let currentElement = element;

    while (currentElement) {
        if (currentElement.matches(selector)) {
            return currentElement;
        }
        currentElement = currentElement.parentElement;
    }

    return null;
}

In the code snippet above, we initiate a while loop that iterates through the element's ancestors until it finds a match for the specified selector. Once a matching element is found, the function returns it. If no match is found, the function returns null.

3. Using the closestWithoutJQuery function:
Now that we have our custom closestWithoutJQuery function, let's see it in action. Suppose we have an HTML structure like this:

<div>
    <ul>
        <li>Item 1</li>
        <li class="target">Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

If we want to find the closest div element that contains the list item with the class "target," we can do so with the following JavaScript snippet:

const targetElement = document.querySelector('.target');
const closestDiv = closestWithoutJQuery(targetElement, 'div');
console.log(closestDiv);

By running the above code, you should see the div element containing the targeted list item logged to the console.

In conclusion, by understanding the principles behind the jQuery closest() method and crafting a custom function, you can achieve the same functionality in vanilla JavaScript without relying on the jQuery library. Remember to test your implementation thoroughly to ensure it meets your requirements. Experiment with different scenarios and selectors to get comfortable with the closestWithoutJQuery function.

Happy coding!