JavaScript

JavaScript DOM Remove Methods
طرق وأساليب حذف من شجرة DOM في لغة جافا سكريبت

ستتعلم في هذا الدرس جميع دوال وخواص الحذف من ملف HTML سواء حذف عناصر Elements أو حذف خصائص Attributes أو إزالة عناصر فرعية Child Nodes أو إزالة أي Event لأي عنصر في لغة جافاسكريبت.

التاريخ

16 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1360

المواضيع

24
الشروحات chevron_left JavaScript DOM Remove Methods chevron_left JavaScript

Remove Methods
طرق وأساليب الحذف في لغة جافا سكريبت

</> remove() DOM Method in JavaScript
دالة ()removeفي الشجرة DOM Tree في لغة جافا سكريبت

تستخدم دالة ()remove في لغة جافا سكريبت لحذف عنصر من شجرة DOM Tree من صفحة HTML ولكن يجب عليك تحديد  العنصر أولاً الزي تريد حذفة عن طريق دوال Get Element.

remove() method Syntax

كيف تكتب دالة [ remove ] remove() method Syntax؟

Element.remove();

remove Parameters معطيات أو عوامل دالة ()remove في لغة جافا سكريبت:

 دالة ()remove ليس لها أي عامل

remove element

يمكنك حذف عنصر من الشجرة عن طريق دالة ()remove.

let apple = document.getElementById('apple');
let button = document.getElementById('button');
button.addEventListener("click",()=>{
  apple.remove();
});
ملاحظات
دالة remove تقوم بحذف أي عنصر محدد من صفحة HTML عن طريق لغة جافا سكريبت.

</> removeAttribute() DOM Method in JavaScript
دالة ()removeAttribute لحذف خاصية من عنصر DOM Tree في لغة جافا سكريبت

تستخدم دالة ()removeAttribute في لغة جافا سكريبت لحذف خاصية من عنصر موجود داخل  شجرة DOM Tree من صفحة HTML ولكن يجب عليك تحديد  العنصر أولاً الزي تريد حذفة الخاصية منه.

removeAttribute() method Syntax

كيف تكتب دالة [ removeAttribute] removeAttribute() method Syntax؟

Element.removeAttribute('attributeName');

removeAttribute Parameters معطيات أو عوامل دالة ()removeAttribute في لغة جافا سكريبت:

 دالة ()removeAttribute نقوم بتمرير لها عامل واحد فقط:

  •  Attribute Name  وهو اسم الخاصية المراد حذفها من أي عنصر محدد داخل صفحة HTML بلغة جافا سكريبت.
removeAttribute from element

يمكنك حذف خاصية attribute من أي عنصر داخل الشجرة عن طريق دالة ()removeAttribute.

let apple = document.getElementById('apple');
let button = document.getElementById('button');
let p = document.getElementById('p');
button.addEventListener("click",()=>{
    apple.removeAttribute("class");
    p.innerText = "class name now is " +  p.getAttribute("class");
});
ملاحظات
دالة remove تقوم بحذف أي عنصر محدد من صفحة HTML عن طريق لغة جافا سكريبت.

</> removeChild() DOM Method in JavaScript
دالة ()removeChild لحذف عنصر من ابن من عنصر أب DOM Tree في لغة جافا سكريبت

تستخدم دالة ()removeChild في لغة جافا سكريبت لحذف عنصر متفرع من عنصر اخر ابن من اب داخل  شجرة DOM Tree من صفحة HTML ولكن يجب عليك تحديد  العنصر أولاً عن طريق index number.

removeChild() method Syntax

كيف تكتب دالة [ removeAttribute] removeChild() method Syntax؟

Parent.removeChild(Parent.childNodes[0]);

معاملات دالة ()removeChild في لغة جافا سكريبت:

 دالة ()removeChild نقوم بتمرير لها عامل واحد فقط:

  •  childNodes[0]  وهي خاصية نقوم بتحديد رقم العنصرindex  number  المراد حذفة من العناصر الموجودة بداخل Parent أو العنصر الأب.


removeAttribute from element

يمكنك حذف خاصية attribute من أي عنصر داخل الشجرة عن طريق دالة ()removeAttribute.

let students = document.getElementById('students');
let button = document.getElementById('button');
button.addEventListener("click",()=>{
    students.removeChild(students.childNodes[0]);
});
ملاحظات
خاصية childNodes تقرأ السطور الفارغة علي أساس انها عناصر يجب مراعاة ذلك وفي المثال السابق وضعنا جميع العناصر في سطر واحد لكي لا تقرأ المسافات.

</> removeEventListener() DOM Method in JavaScript
دالة ()removeEventListener لحذف EventListener في لغة جافا سكريبت

تستخدم دالة ()removeEventListener في لغة جافا سكريبت لحذف Event مضاف عن طريق دالة addEventListener.

removeEventListener() method Syntax

طريقة كتابة دالة removeEventListener في لغة JavaScript.

element.removeEventListener(event, function, useCapture);

 عوامل دالة ()removeEventListener في لغة جافا سكريبت:

دالة ()removeEventListener يتم تمرير لها ثلاث عوامل:

  •  Event  وهو أسم Event تريد ايقافة فمثلاً click event يمكنك إزالته من أي عنصر بعد التنفيذ ينفذ مره واحدة فقط.
  •  Function  وهي عملية call لدالة custom تقوم ببنائها وهي التي تقوم بإضافتها داخل addEventListener وهي التي سوف تحذف عن طريق دالة removeEventListener.
  •  use Capture  وهي قيميتين Boolean اختياري أما true أو false:

- true - Removes the event handler from the capturing phase.

- false- Default. Removes the event handler from the bubbling phase.

بدون removeEventListener

بدون دالة removeEventListener سوف يتم تنفيذ الأمر عدة مرات.

let students = document.getElementById('students');
let button = document.getElementById('button');
button.addEventListener("click",()=>{
    students.removeChild(students.childNodes[0]);
});
removeEventListener from element

يمكنك حذف event المنفذ من دالة EventListener عن طريق دالة removeEventListener.

function removeHandler(){
  students.removeChild(students.childNodes[0]);
  button.removeEventListener("click",removeHandler);
}
ملاحظات
دالة removeEventListener تقوم بحذف أي Event موجود علي نفس العنصر بعد تنفيذه لمرة أو عدة مرات.
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات