جلسه هفتم – متدهای افزودن و حذف عناصر در jQuery

۱. افزودن محتوا

• append(content)
  → اضافه کردن محتوا یا المان جدید به انتهای داخل المان انتخاب‌شده.

  javascript

  CopyEdit

  $("ul").append("<li>آیتم جدید</li>");

• prepend(content)
  → اضافه کردن محتوا یا المان جدید به ابتدای داخل المان انتخاب‌شده.

  javascript

  CopyEdit

  $("ul").prepend("<li>آیتم جدید</li>");

• after(content)
  → اضافه کردن محتوا یا المان جدید بعد از المان (خارج از آن).

  javascript

  CopyEdit

  $("ul").after("<p>بعد از لیست</p>");

• before(content)
  → اضافه کردن محتوا یا المان جدید قبل از المان (خارج از آن).

  javascript

  CopyEdit

  $("ul").before("<p>قبل از لیست</p>");

۲. حذف محتوا

• remove()
  → حذف کامل المان از صفحه همراه با محتوای داخل آن.

  javascript

  CopyEdit

  $("ul").remove();

• empty()
  → فقط محتوای داخل المان را حذف می‌کند، خود المان باقی می‌ماند.

  javascript

  CopyEdit

  $("ul").empty();

• remove(selector)
  → حذف المان‌هایی که با شرط انتخاب شده حذف می‌شوند، یعنی فقط المان‌هایی که با سلکتور (شرط) داده شده مطابقت دارند حذف می‌شوند.
  مثال:

  javascript

  CopyEdit

  $("span").remove(".c1, .c6");

  در اینجا:

  • فقط المان‌های <span> که کلاس c1 یا c6 دارند حذف می‌شوند.
  • المان‌هایی که والد دارند حذف نمی‌شوند ولی اگر المان والد نداشته باشد، حذف انجام می‌شود.

۳. نکات مهم

• متدهای append و prepend داخل المان اضافه می‌کنند، ولی after و before بیرون از آن.
• remove() المان را به‌طور کامل از DOM حذف می‌کند.
• empty() فقط محتوای داخلی را پاک می‌کند، ولی خود المان باقی می‌ماند.
• در remove(selector) فقط المان‌هایی حذف می‌شوند که با شرط داده شده (مثل کلاس) مطابقت داشته باشند.
• اگر المان والد داشته باشد، برخی المان‌ها حذف نمی‌شوند ولی اگر والد نداشته باشند، حذف ممکن است انجام شود.