Node.removeChild()
و Node.removeChild()
الأسلوب يزيل عقدة الطفل من DOM وإرجاع العقدة التي تمت إزالتها.
بناء الجملة
var oldChild = العقدة .removeChild ( child ) ؛ أو عقدة. إزالة الطفل ( طفل ) ؛
child
هي العقدة الفرعية المراد إزالتها من DOM.node
هي العقدة الأم لـchild
.oldChild
يحمل إشارة إلى العقدة الفرعية التي تمت إزالتها ، أيoldChild === child
.
لا تزال العقدة الفرعية التي تمت إزالتها موجودة في الذاكرة ، ولكنها لم تعد جزءًا من DOM. مع عرض أول صيغة ، يمكنك إعادة استخدام العقدة التي تمت إزالتها لاحقًا في التعليمات البرمجية ، عبر oldChild
مرجع الكائن.
ومع ذلك ، في النموذج الثاني للبناء ، لا يوجد oldChild
مرجع محفوظ ، لذلك بافتراض أن الشفرة الخاصة بك لم تحتفظ بأي مرجع آخر للعقدة في مكان آخر ، فستصبح غير قابلة للاستخدام ولا رجعة فيها على الفور ، وعادة ما يتم حذفها تلقائيًا من الذاكرة بعد وقت قصير.
إذا child
لم يكن في الواقع تابع element
للعقدة ، فإن الطريقة تستثني. سيحدث هذا أيضًا إذا child
كان في الواقع طفلًا element
في وقت المكالمة ، ولكن تمت إزالته بواسطة معالج حدث تم استدعاؤه أثناء محاولة إزالة العنصر (على سبيل المثال ، blur
.)
ألقيت أخطاء
تقدم الطريقة استثناءً بطريقتين مختلفتين:
-
If the
child
was in fact a child ofelement
and so existing on the DOM, but was removed the method throws the following exception:Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node
. -
If the
child
doesn't exist on the DOM of the page, the method throws the following exception:
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
Examples
Simple examples
Given this HTML:
<div id="top">
<div id="nested"></div>
</div>
To remove a specified element when knowing its parent node:
let d = document.getElementById("top");
let d_nested = document.getElementById("nested");
let throwawayNode = d.removeChild(d_nested);
To remove a specified element without having to specify its parent node:
let node = document.getElementById("nested");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
To remove all children from an element:
let element = document.getElementById("top");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
Causing a TypeError
<!--Sample HTML code-->
<div id="top"> </div>
<script type="text/javascript">
let top = document.getElementById("top");
let nested = document.getElementById("nested");
// Throws Uncaught TypeError
let garbage = top.removeChild(nested);
</script>
Causing a NotFoundError
<!--Sample HTML code-->
<div id="top">
<div id="nested"></div>
</div>
<script type="text/javascript">
let top = document.getElementById("top");
let nested = document.getElementById("nested");
// This first call correctly removes the node
let garbage = top.removeChild(nested);
// Throws Uncaught NotFoundError
garbage = top.removeChild(nested);
</script>
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'Node: removeChild' in that specification. |
Living Standard |
التوافق المتصفح
BCD tables only load in the browser