JavaScript DOM Remove Methods
طرق وأساليب حذف من شجرة DOM في لغة جافا سكريبت
ستتعلم في هذا الدرس جميع دوال وخواص الحذف من ملف HTML سواء حذف عناصر Elements أو حذف خصائص Attributes أو إزالة عناصر فرعية Child Nodes أو إزالة أي Event لأي عنصر في لغة جافاسكريبت.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات 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();
});
ملاحظات
</>
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");
});
ملاحظات
</>
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]);
});
ملاحظات
</>
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);
}
ملاحظات
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
