حذف محتوا (Remove)

گاهی لازم است در جیک جیک jQuery بخشی از صفحه را پاک کنیم. با حذف محتوا در jQuery می توانی تگ ها یا فقط داخلشان را مثل پاک کن دفتر مشق، تمیز کنی.

حذف المنت و حذف فقط محتوای داخل آن

در مدل DOM یا Document Object Model، هر تگ مثل یک جعبه است. گاهی می خواهی خود جعبه را حذف کنی، گاهی فقط وسایل داخلش را خالی می کنی.

در این بخش دو متد مهم داریم:

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

$("#div1").remove();

این خط تگ با id مساوی div1 را کامل حذف می کند؛ دیگر هیچ اثری از آن در صفحه نمی ماند.

متد empty() خود المنت را نگه می دارد اما داخلش را خالی می کند. یعنی جعبه روی صفحه هست، اما کاملا خالی شده است.

$("#div1").empty();

این کد تمام تگ های فرزند داخل div1 را حذف می کند، اما خود div1 همچنان وجود دارد و می توانی دوباره در آن محتوا قرار دهی.

گاهی نمی خواهی همه المنت ها حذف شوند. فقط بعضی از آن ها با یک کلاس خاص باید حذف شوند. اینجا پارامتر متد remove() به کمک می آید.

متد remove() می تواند یک selector بگیرد. selector یعنی الگوی انتخاب المنت، مثلا بر اساس کلاس.

در این مثال، فقط پاراگراف هایی با class برابر test حذف می شوند.

$("p").remove(".test");

یعنی از بین همه pها، فقط آن هایی که کلاس test دارند حذف می شوند؛ بقیه متن ها امن می مانند.

می توانی چند کلاس را هم زمان هدف بگیری. مثل این که بگویی همه پاراگراف های مهم و نمونه را با هم پاک کن.

$("p").remove(".test, .demo");

اینجا تمام pهایی که کلاس test یا demo دارند، با یک دستور حذف می شوند.

یک div بساز که داخلش چند p و span داشته باشد.
با empty() فقط محتوای داخل آن div را خالی کن.
همان div را دوباره پر کن و این بار با remove() خود div را حذف کن.
چند p با کلاس های test و demo بساز و با remove(".test") تست کن.
در پایان، با remove(".test, .demo") هر دو نوع پاراگراف را حذف کن؛ برای مقایسه می توانی به صفحه های افزودن محتوا (Add) و تنظیم محتوا (Set) هم سر بزنی.