متد remove و empty

حذف عناصر با remove() و پاک کردن محتوای آن‌ها با empty()

حذف عناصر و محتوا

دو متد برای «حذف کردن» داریم که تفاوت مهمی دارند:

متدکار
remove()عنصر و همه فرزندانش را کاملاً از DOM حذف می‌کند
empty()فقط محتوای داخلی عنصر را پاک می‌کند؛ خود عنصر می‌ماند

مثال تفاوت

// فرض کنید:
// <div id="box"><p>پاراگراف</p></div>

$("#box").empty();
// نتیجه: <div id="box"></div>  (div خالی ماند)

$("#box").remove();
// نتیجه: هیچ چیز! (div هم حذف شد)

remove با فیلتر

متد remove() می‌تواند یک سلکتور به‌عنوان پارامتر بگیرد تا فقط عناصر مطابق حذف شوند:

// حذف همه کلاس‌های "temp" از بین divها
$("div").remove(".temp");

// حذف فقط liهایی که کلاس done دارند
$("li").remove(".done");

مثال کاربردی: حذف آیتم لیست کارها

// حذف تک‌تک آیتم‌ها
$("#todoList").on("click", ".delete-btn", function() {
    $(this).closest("li").fadeOut(300, function() {
        $(this).remove();  // حذف پس از محو شدن
    });
});

// پاک کردن کل لیست (خود ul می‌ماند)
$("#clearAll").click(function() {
    $("#todoList").empty();
});
ترکیب fadeOut + remove در callback، الگوی محبوب حذف نرم عناصر است: اول عنصر محو می‌شود، بعد کاملاً از DOM حذف می‌شود.

remove در برابر detach

اگر بخواهید عنصر را حذف کنید ولی بعداً دوباره اضافه‌اش کنید، detach() بهتر است چون رویدادهای متصل به عنصر را حفظ می‌کند:

// حذف با حفظ رویدادها
var $panel = $("#myPanel").detach();

// ... بعداً برگرداندن
$("#container").append($panel);  // رویدادها هنوز کار می‌کنند!

متدهای مرتبط دیگر

// unwrap: والد عنصر را حذف می‌کند ولی خود عنصر می‌ماند
$("p").unwrap();

// replaceWith: جایگزینی عنصر با محتوای جدید
$("#oldDiv").replaceWith("<div>محتوای جدید</div>");

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط