انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 51
دورة جافا سكريبت

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
9
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,800
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

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

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

remove() method Syntax

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

HTML 
Element.remove();

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

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

remove element

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

HTML 
let apple = document.getElementById('apple');
let button = document.getElementById('button');
button.addEventListener("click",()=>{
  apple.remove();
});
جرّب بنفسك

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

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

removeAttribute() method Syntax

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

HTML 
Element.removeAttribute('attributeName');

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

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

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

removeAttribute from element

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

HTML 
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");
});
جرّب بنفسك

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

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

removeChild() method Syntax

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

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

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

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

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


removeAttribute from element

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

HTML 
let students = document.getElementById('students');
let button = document.getElementById('button');
button.addEventListener("click",()=>{
    students.removeChild(students.childNodes[0]);
});
جرّب بنفسك

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

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

removeEventListener() method Syntax

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

HTML 
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 سوف يتم تنفيذ الأمر عدة مرات.

HTML 
let students = document.getElementById('students');
let button = document.getElementById('button');
button.addEventListener("click",()=>{
    students.removeChild(students.childNodes[0]);
});
جرّب بنفسك

removeEventListener from element

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

HTML 
function removeHandler(){
  students.removeChild(students.childNodes[0]);
  button.removeEventListener("click",removeHandler);
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…