files/ar/web/api/node/removechild/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

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

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

<h2 id="بناء_الجملة">بناء الجملة</h2>

<pre class="syntaxbox">var <em>oldChild</em> = <em>العقدة</em> .removeChild ( <em>child</em> ) ؛
<strong>أو </strong>
<em>عقدة.</em> إزالة <em>الطفل</em> ( <em>طفل</em> ) ؛
</pre>

<ul>
 <li><code>child</code> هي العقدة الفرعية المراد إزالتها من DOM.</li>
 <li><code>node</code>هي العقدة الأم لـ <code>child</code>.</li>
 <li><code>oldChild</code>يحمل إشارة إلى العقدة الفرعية التي تمت إزالتها ، أي <code>oldChild === child</code>.</li>
</ul>

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

<p>ومع ذلك ، في النموذج الثاني للبناء ، لا يوجد <code>oldChild</code>مرجع محفوظ ، لذلك بافتراض أن الشفرة الخاصة بك لم تحتفظ بأي مرجع آخر للعقدة في مكان آخر ، فستصبح غير قابلة للاستخدام ولا رجعة فيها على الفور ، وعادة ما يتم <a href="/en-US/docs/Web/JavaScript/Memory_Management">حذفها تلقائيًا</a> من الذاكرة بعد وقت قصير.</p>

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

<h3 id="ألقيت_أخطاء">ألقيت أخطاء</h3>

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

<ol>
 <li>
  <p>If the <code>child</code> was in fact a child of <code>element</code> and so existing on the DOM, but was removed the method throws the following exception:</p>

  <p><code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node</code>.</p>
 </li>
 <li>
  <p>If the <code>child</code> doesn't exist on the DOM of the page, the method throws the following exception:<br>
   <br>
   <code>Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.</code></p>
 </li>
</ol>

<h2 id="Examples">Examples</h2>

<h3 id="Simple_examples">Simple examples</h3>

<p>Given this HTML:</p>

<pre class="brush: html">&lt;div id="top"&gt;
  &lt;div id="nested"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<p>To remove a specified element when knowing its parent node:</p>

<pre class="brush:js">let d = document.getElementById("top");
let d_nested = document.getElementById("nested");
let throwawayNode = d.removeChild(d_nested);
</pre>

<p>To remove a specified element without having to specify its parent node:</p>

<pre class="brush:js">let node = document.getElementById("nested");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}
</pre>

<p>To remove all children from an element:</p>

<pre class="brush:js">let element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}
</pre>

<h3 id="Causing_a_TypeError">Causing a TypeError</h3>

<pre class="brush: html">&lt;!--Sample HTML code--&gt;
&lt;div id="top"&gt; &lt;/div&gt;

&lt;script type="text/javascript"&gt;
  let top = document.getElementById("top");
  let nested = document.getElementById("nested");

  // Throws Uncaught TypeError
  let garbage = top.removeChild(nested);
&lt;/script&gt;
</pre>

<h3 id="Causing_a_NotFoundError">Causing a NotFoundError</h3>

<pre class="brush: html">&lt;!--Sample HTML code--&gt;
&lt;div id="top"&gt;
  &lt;div id="nested"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
  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);
&lt;/script&gt;
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("DOM WHATWG", "#dom-node-removechild", "Node: removeChild")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="التوافق_المتصفح">التوافق المتصفح</h2>

<div class="hidden">يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المنظمة. إذا كنت ترغب في المساهمة في البيانات ، يرجى مراجعة <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> وإرسال طلب سحب إلينا.</div>

<p>{{Compat("api.Node.removeChild")}}</p>

<h2 id="أنظر_أيضا">أنظر أيضا</h2>

<ul>
 <li>{{domxref("Node.replaceChild")}}</li>
 <li>{{domxref("Node.parentNode")}}</li>
 <li>{{domxref("ChildNode.remove")}}</li>
</ul>