revision:
The closest() method of the Element interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector.
The closest() method searches up the DOM tree for elements which match a specified CSS selector. It starts at the element itself, then the anchestors (parent, grandparent, ...) until a match is found. It returns null() if no match is found.
element.closest(selectors)
Parameters:
selectors : required. A string of valid CSS selector to match the Element and its ancestors against. One or more (comma separeted) CSS selectors to match.
<article>
<div id="div-01">
Here is div-01
<div id="div-02">
Here is div-02
<div id="div-03">Here is div-03</div>
</div>
</div>
</article>
<script>
const el = document.getElementById("div-03");
// the closest ancestor with the id of "div-02"
console.log(el.closest("#div-02")); // <div id="div-02">
// the closest ancestor which is a div in a div
console.log(el.closest("div div")); // <div id="div-03">
// the closest ancestor which is a div and has a parent article
console.log(el.closest("article > div")); // <div id="div-01">
// the closest ancestor which is not a div
console.log(el.closest(":not(div)")); // <article>
</script>
example: find the closest element that matches the CSS selector ".container".
<div>
<div class="demo"> Grandparent
<div class="demo container">Parent
<div id="myElement" class="demo">The parent of this div element will be selected.</div>
</div>
</div>
</div>
<style>
.container, .demo {background-color: tomato; color: white; padding: 2vw; margin: 1vw;}
</style>
<script>
const element = document.getElementById("myElement");
const closest = element.closest(".container");
if (closest) {
closest.style.border = "4px solid black";
}
</script>
example: find the closest element that matches ".container" or ".wrapper"
<div>
<p id="demo1" class="container1"></p>
</div>
<style>
.container1, .demo1 {background-color: tomato; color: white; padding: 2vw; margin: 1vw;}
</style>
<script>
const el = document.getElementById("demo1");
let text;
if (el.closest(".container1, .wrapper")) {
text = "This element is closest to one of the selectors.";
} else {
text = "This element does not match any of the selectors.";
}
document.getElementById("demo1").innerHTML = text;
</script>
example: usage of the closestr() method by searching the given elements in the HTML dOM structure.
It is paragraph
<div>
<div>
<span>
Hello! it is a span
<p id="p">
It is paragraph
</p>
</span>
</div>
<p id="closest-A"></p>
<p id="closest-B"></p>
<p id="closest-C"></p>
<p id="closest-D"></p>
</div>
<script>
// Get the paragraph element
let ele = document.getElementById('p');
// Return the closest paragraph element/ which is the element itself
let close1 = ele.closest("p");
console.log(close1)
document.getElementById("closest-A").innerHTML = close1;
// Return the closest span element
let close2 = ele.closest("span");
console.log(close2)
document.getElementById("closest-B").innerHTML = close2;
// Return the closest div element
let close3 = ele.closest("div");
console.log(close3)
document.getElementById("closest-C").innerHTML = close3;
</script>