diff options
Diffstat (limited to 'files/ar/web/api/node/removechild/index.html')
| -rw-r--r-- | files/ar/web/api/node/removechild/index.html | 144 |
1 files changed, 144 insertions, 0 deletions
diff --git a/files/ar/web/api/node/removechild/index.html b/files/ar/web/api/node/removechild/index.html new file mode 100644 index 0000000000..aea43247bd --- /dev/null +++ b/files/ar/web/api/node/removechild/index.html @@ -0,0 +1,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"><div id="top"> + <div id="nested"></div> +</div> +</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"><!--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> +</pre> + +<h3 id="Causing_a_NotFoundError">Causing a NotFoundError</h3> + +<pre class="brush: html"><!--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> +</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> |