removeChild() मेथड क्या है?
DOM removeChild() मेथड किसी निर्दिष्ट पैरेंट नोड से एक चाइल्ड नोड को हटाता है और हटाए गए चाइल्ड नोड को लौटाता है। यह DOM ट्री को मैनिपुलेट करने का एक मौलिक मेथड है।
सिंटैक्स
parentNode.removeChild(childNode)पैरामीटर
childNode: हटाने के लिए चाइल्ड नोड (पैरेंट का सीधा बच्चा होना चाहिए)।
रिटर्न मान
हटाया गया चाइल्ड नोड। यह नोड दस्तावेज़ से अलग हो जाता है लेकिन मेमोरी में रहता है और इसे बाद में फिर से जोड़ा जा सकता है।
उदाहरण
यह उदाहरण एक सूची से विषयों को एक-एक करके हटाता है:
<!DOCTYPE html>
<html>
<head>
<style>
html { height: 100%; }
body {
text-align: center;
color: #fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height: 100%;
}
p { font-weight: 700; font-size: 1.2rem; }
ul { list-style-type: none; padding: 0; }
.btn {
background: #0197F6;
border: none;
height: 2rem;
border-radius: 2px;
width: 50%;
margin: 2rem auto;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
.show { font-size: 1.5rem; font-weight: bold; }
</style>
</head>
<body>
<h1>छात्र विषय</h1>
<p>नमस्ते, मेरे पसंदीदा विषय हैं:</p>
<ul id="subjectList">
<li>Physics</li>
<li>Chemistry</li>
<li>Maths</li>
<li>English</li>
</ul>
<button onclick="removeSubject()" class="btn">विषय हटाएं</button>
<script>
function removeSubject() {
var subList = document.getElementById("subjectList");
if (subList.hasChildNodes()) {
var removed = subList.removeChild(subList.firstElementChild);
console.log("हटाया गया:", removed.textContent);
}
}
</script>
</body>
</html>आउटपुट
प्रत्येक बार "विषय हटाएं" बटन पर क्लिक करने पर, सूची से पहला विषय हटा दिया जाता है (Physics → Chemistry → Maths → English)।
महत्वपूर्ण बिंदु
- पैरेंट संदर्भ आवश्यक: आपको पैरेंट नोड पर मेथड कॉल करना होगा, चाइल्ड पर नहीं।
- रिटर्न मान उपयोगी: हटाया गया नोड लौटाया जाता है, जिससे आप इसे कहीं और फिर से जोड़ सकते हैं।
- त्रुटि संचालन: यदि चाइल्ड पैरेंट का बच्चा नहीं है, तो
DOMException(NotFoundError) फेंका जाता है। - टेक्स्ट नोड्स:
childNodesमें टेक्स्ट नोड्स (व्हाइटस्पेस सहित) शामिल होते हैं; तत्वों के लिएfirstElementChild/lastElementChildका उपयोग करें।
सामान्य पैटर्न
// सभी बच्चों को हटाने के लिए (कुशल तरीका):
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
// या आधुनिक तरीका:
parent.innerHTML = ""; // लेकिन यह इवेंट लिसनर्स को नष्ट कर देता हैब्राउज़र समर्थन
सभी ब्राउज़रों में सार्वभौमिक समर्थन (IE6+ सहित)।
