حذف عناصر

حذف عناصر از DOM

مقدمه

در درس‌های قبل این فصل، یاد گرفتیم چگونه عنصر جدید بسازیم، محتوا و Attribute های آن را تغییر دهیم، و ظاهرش را کنترل کنیم. آخرین عملیات پایه‌ای که برای تکمیل این مجموعه لازم است، حذف یک عنصر از DOM است؛ برای نمونه، حذف یک آیتم از لیست، یا بستن کامل یک پیام اطلاع‌رسانی.

remove — روش مدرن و مستقیم

ساده‌ترین روش حذف یک عنصر، فراخوانی مستقیم متد remove روی خودِ همان عنصر است:

let notification = document.getElementById("notification");

console.log(document.body.contains(notification));

notification.remove();

console.log(document.body.contains(notification));

تحلیل کد

پیش از فراخوانی remove، متد document.body.contains مقدار true برمی‌گرداند؛ چون notification واقعاً بخشی از DOM Tree است. پس از فراخوانی notification.remove()، این عنصر کاملاً از درخت جدا می‌شود و contains مقدار false برمی‌گرداند. نکته‌ی مهم این است که متغیر notification همچنان در حافظه‌ی جاوااسکریپت به همان شیء اشاره دارد (دقیقاً طبق رفتار Reference Types که در فصل انواع داده دیدیم)؛ فقط دیگر آن شیء، بخشی از صفحه‌ی قابل‌مشاهده نیست.

removeChild — روش قدیمی‌تر، از طریق والد

پیش از رواج remove، روش رایج حذف یک عنصر این بود که ابتدا به والد آن دسترسی پیدا کنیم و سپس از طریق والد، دستور حذف فرزند را صادر کنیم:

let list = document.getElementById("myList");
let firstItem = list.firstElementChild;

list.removeChild(firstItem);

console.log(list.children.length);

تحلیل رفتار جاوااسکریپت

برخلاف remove که مستقیماً روی عنصر موردنظر فراخوانی می‌شود، removeChild باید روی والد فراخوانی شود و عنصر فرزندی که باید حذف شود، به‌عنوان آرگومان به آن پاس داده می‌شود. این الگو دقیقاً شبیه چیزی است که در فصل قبل، هنگام بررسی insertBefore، دیدیم؛ آن‌جا هم متد روی والد فراخوانی می‌شد، نه روی عنصر مرجع. removeChild، برخلاف remove، مقدار عنصر حذف‌شده را نیز برمی‌گرداند؛ این ویژگی می‌تواند برای استفاده‌ی بعدی از همان عنصر (مثلاً افزودن آن به جای دیگری) مفید باشد.

حذف تمام فرزندان یک عنصر

یک نیاز رایج دیگر، خالی کردن کامل محتوای یک عنصر (حذف تمام فرزندان آن) است. رایج‌ترین و ساده‌ترین روش برای این کار، استفاده از همان innerHTML است که در درس‌های قبل دیدیم:

let container = document.getElementById("container");
container.innerHTML = "";

با تنظیم innerHTML به یک رشته‌ی خالی، تمام محتوای داخلی عنصر -شامل تمام عناصر فرزند و متن‌های آن- به‌طور کامل پاک می‌شود.

حذف چند عنصر مطابق یک Selector

برای حذف چند عنصر که همگی با یک Selector خاص مطابقت دارند، معمولاً querySelectorAll (که در فصل قبل دیدیم) را با یک حلقه یا متد تکرارکننده ترکیب می‌کنیم:

let completedItems = document.querySelectorAll(".completed");

console.log(completedItems.length);

completedItems.forEach(function (item) {
  item.remove();
});

تحلیل کد

در این مثال، querySelectorAll(".completed") یک NodeList از تمام عناصری که کلاس completed دارند برمی‌گرداند؛ همان‌طور که در فصل قبل دیدیم، NodeList متد forEach را مستقیماً پشتیبانی می‌کند. داخل این forEach، روی هر عنصر مطابق، متد remove فراخوانی می‌شود؛ به این ترتیب، تمام عناصری که آن کلاس خاص را دارند، از DOM حذف می‌شوند.

جدول جمع‌بندی

روش	نحوه‌ی فراخوانی	مقدار بازگشتی
element.remove()	مستقیماً روی خودِ عنصر	undefined
parent.removeChild(child)	روی والد، با پاس دادن فرزند	خودِ عنصر حذف‌شده
container.innerHTML = ""	روی عنصر والد	حذف تمام فرزندان هم‌زمان

جمع‌بندی

برای حذف یک عنصر واحد از DOM، متد مدرن remove مستقیماً روی خودِ عنصر فراخوانی می‌شود و ساده‌ترین روش است. متد قدیمی‌تر removeChild باید روی والد فراخوانی شود و عنصر فرزند موردنظر را به‌عنوان آرگومان می‌پذیرد. برای خالی کردن کامل محتوای یک عنصر، تنظیم innerHTML به رشته‌ی خالی رایج‌ترین روش است، و برای حذف چند عنصر مطابق یک Selector، معمولاً querySelectorAll با forEach ترکیب می‌شود.