In JavaScript, the closest function is utilized to obtain the nearest ancestor, or parent element, that corresponds to the specified selectors. If no matching ancestor exists, this method will yield null.
This technique navigates through the specified element and its ancestor nodes within the document hierarchy, and the navigation proceeds until it locates the first node that corresponds to the given selector string.
Syntax
targetElement.closest(selectors);
In the syntax mentioned above, the term selectors refers to a string that comprises a selector (such as p:hover, among others) that is utilized to locate a specific node.
Let’s explore this approach through several examples.
Example1
In this illustration, we have a total of three div elements along with a heading, on which we will utilize the closest method. The selectors employed in this context include the id selector, descendant selector, child selector, and the :not selector.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id = "div1"> This is the first div element.
<h3 id = "h"> This is a heading inside the div. </h3>
<div id = "div2"> This is the div inside the div element.
<div id = "div3"> This is the div element inside the second div element. </div>
</div>
</div>
<script>
var val1 = document.getElementById("div3");
var o1 = val1.closest("#div1");
var o2 = val1.closest("div div");
var o3 = val1.closest("div > div");
var o4 = val1.closest(":not(#div3)");
console.log(o1);
console.log(o2);
console.log(o3);
console.log(o4);
</script>
</body>
</html>
Output
Upon running the code provided above, the resulting output will be -
Example2
Here is an additional illustration of employing the closest method in JavaScript.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id = "div1"> This is the div element.
<p id = "p1"> This is the paragraph element inside the div element.
<h3 id = "h"> This is the child of the paragraph element.
<p id = "p2"> This is the child of heading element of the paragraph element. </p>
</h3>
</p>
</div>
<script>
var val1 = document.getElementById("p2");
var o1 = val1.closest("p");
var o2 = val1.closest("h3");
var o3 = val1.closest("div");
console.log(o1);
console.log(o2);
console.log(o3);
</script>
</body>
</html>
Output
Upon executing the aforementioned code, the resulting output will be -
