--- title: Node.removeChild() slug: Web/API/Node/removeChild translation_of: Web/API/Node/removeChild ---
{{APIRef("DOM")}}

و Node.removeChild()الأسلوب يزيل عقدة الطفل من DOM وإرجاع العقدة التي تمت إزالتها.

بناء الجملة

var oldChild = العقدة .removeChild ( child ) ؛
أو 
عقدة. إزالة الطفل ( طفل ) ؛

لا تزال العقدة الفرعية التي تمت إزالتها موجودة في الذاكرة ، ولكنها لم تعد جزءًا من DOM. مع عرض أول صيغة ، يمكنك إعادة استخدام العقدة التي تمت إزالتها لاحقًا في التعليمات البرمجية ، عبر oldChildمرجع الكائن.

ومع ذلك ، في النموذج الثاني للبناء ، لا يوجد oldChildمرجع محفوظ ، لذلك بافتراض أن الشفرة الخاصة بك لم تحتفظ بأي مرجع آخر للعقدة في مكان آخر ، فستصبح غير قابلة للاستخدام ولا رجعة فيها على الفور ، وعادة ما يتم حذفها تلقائيًا من الذاكرة بعد وقت قصير.

إذا childلم يكن في الواقع تابع elementللعقدة ، فإن الطريقة تستثني. سيحدث هذا أيضًا إذا childكان في الواقع طفلًا elementفي وقت المكالمة ، ولكن تمت إزالته بواسطة معالج حدث تم استدعاؤه أثناء محاولة إزالة العنصر (على سبيل المثال ، {{Event("blur")}}.)

ألقيت أخطاء

تقدم الطريقة استثناءً بطريقتين مختلفتين:

  1. If the child was in fact a child of element 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.

  2. 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
{{SpecName("DOM WHATWG", "#dom-node-removechild", "Node: removeChild")}} {{Spec2("DOM WHATWG")}}

التوافق المتصفح

{{Compat("api.Node.removeChild")}}

أنظر أيضا