الدرس العشرون: حذف العناصر من الصفحة باستخدام JavaScript

 في هذا الدرس سنتعلم كيف يمكننا إزالة عناصر HTML من الصفحة باستخدام JavaScript، سواء بشكل مباشر أو بعد حدث معين (مثل الضغط على زر).

---

1. استخدام remove() لحذف عنصر

هذه الطريقة تُستخدم لحذف عنصر معين مباشرة.

<p id="msg">رسالة مؤقتة</p>
<button onclick="removeMessage()">احذف الرسالة</button>

function removeMessage() {
  let message = document.getElementById("msg");
  message.remove(); // يُحذف من الصفحة
}

---

2. استخدام removeChild() لحذف عنصر من عنصر الأب

<div id="container">
  <p id="note">ملاحظة مهمة</p>
</div>

let parent = document.getElementById("container");
let child = document.getElementById("note");

parent.removeChild(child);

مفيد إذا كنت تحتاج التحقق أو التعامل مع الطفل داخل عنصر آخر.

---

3. مثال عملي: حذف عنصر عند النقر

<ul id="myList">
  <li onclick="this.remove()">انقر لحذفي</li>
  <li onclick="this.remove()">انقر لحذفي</li>
</ul>

هنا نستخدم this.remove() لحذف العنصر الذي نُقر عليه مباشرة.

---

4. حذف كل العناصر الأبناء (تفريغ عنصر)

let box = document.getElementById("container");
box.innerHTML = ""; // يحذف جميع المحتويات داخل العنصر

---

✅ ملخص الدرس:

الطريقة	الوظيفة
element.remove()	حذف العنصر مباشرة
parent.removeChild()	حذف عنصر معين داخل عنصر أب
element.innerHTML = ""	حذف كل المحتوى داخل العنصر الأب