JavaScript का उपयोग करके पैरेंट एलिमेंट एक्सेस करने का निम्नलिखिक कोड है:
उदाहरण
<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Access Parent Element</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 18px; font-weight: 500; color: #8a2be2; } .parent1, .parent2, .parent3 { display: inline-block; margin: 10px; } .child1, .child2, .child3 { width: 70px; height: 70px; } .child1 { background-color: red; } .child2 { background-color: pink; } .child3 { background-color: blue; } </style> </head> <body> <h1>JavaScript का उपयोग करके पैरेंट एलिमेंट एक्सेस करना</h1> <div class="parent1"> <div class="child1">चाइल्ड 1</div> </div> <div class="parent2"> <div class="child2">चाइल्ड 2</div> </div> <div class="parent3"> <div class="child3">चाइल्ड 3</div> </div> <br /> <div class="result"></div> <h3>ऊपर दिए गए किसी भी डिव पर क्लिक करके उसका पैरेंट एलिमेंट जानें</h3> <script> let resEle = document.querySelector(".result"); document.querySelector(".child3").addEventListener("click", (event) => { resEle.innerHTML = "पैरेंट नोड है " + event.target.parentNode.className; }); document.querySelector(".child1").addEventListener("click", (event) => { resEle.innerHTML = "पैरेंट नोड है " + event.target.parentNode.className; }); document.querySelector(".child2").addEventListener("click", (event) => { resEle.innerHTML = "पैरेंट नोड है " + event.target.parentNode.className; }); </script> </body> </html>आउटपुट
ऊपर दिए गए किसी भी डिव पर क्लिक करने पर निम्नलिखिक आउटपुट मिलेगा:
