آموزش حذف عناصر یا remove در جی کوئری

علیرضا حاتمی نیا 729

با سلام. همراه شما هستم با قسمت دیگری از آموزش جی کوئری از سری آموزش های وبسایت ILikePHP
در جلسه قبل در مورد آموزش اضافه کردن محتوا به عناصر در جی کوئری صحبت کردیم و در این جلسه در مورد حذف محتوا و عناصر در جی کوئری می پردازیم.

حذف عناصر در جی کوئری

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

متدهای remove و empty در جی کوئری

  • متد remove : توسط این متد می توان عنصر یا عناصر انتخاب شده را همراه با فرزندانش حذف یا پاک نمود.
  • متد empty : توسط این متد می توان فرزندان عنصر یا عناصر انتخاب شده را حذف یا پاک نمود.

متد remove در جی کوئری

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

مثال برای متد remove

در مثال زیر با کلیک به روی دکمه تگ <div> همراه با سه فرزند <p> و محتوای داخل <div> در صفحه حذف می شوند.

HTML

<div>

This is some text in the div.
<p>This is first paragraph in the div.</p>
<p>This is second paragraph in the div.</p>
<p>This is third paragraph in the div.</p>

</div>
<br>

<button>Remove div </button>

Jquery

$("button").click(function(){
        $("div").remove();
    });

فیلتر کردن عماصر توسط remove

می توان توسط پارامتر اختیاری متد remove که به صورت نام عنصر، کلاس یا شناسه عنصر یا عناصر مورد نظر است را انتحاب وحذف کرد.

مثال ارسال پارامتر به متد remove

فرض کنید در مثال بالا دو عنصر از عناصر <p> دارای کلاس remove باشند.

HTML

<div>

This is some text in the div.
<p>This is first paragraph in the div.</p>
<p class="remove">This is second paragraph in the div.</p>
<p class="remove">This is third paragraph in the div.</p>

</div>

Jquery

$("button").click(function(){
        $("p").remove(".remove");
    });

متد empty در جی کوئری

توسط متد empty می توانید فرزند یا فرزندان عنصر یا عناصر انتخاب شده را حذف کنید. توجه داشته باشید که حذف به معنی پنهان کردن یا مخفی کردن عناصر در صفحه نمی باشد. بلکه به معنی حذف کلی عنصر انتخاب شده است.

مثال متد empty

در مثال زیر فرزندان تگ div موجود در صفحه را توسط متد empty حذف می کنیم. توجه داشته باشید که فقط فرزندان حذف می شوند و تگ <div> باقی می ماند.

HTML

<div>

This is some text in the div.
<p>This is first paragraph in the div.</p>
<p>This is second paragraph in the div.</p>
<p>This is third paragraph in the div.</p>

</div>

Jquery

$("button").click(function(){
        $("div").empty();
    });

 

کلمات کلیدی

لینک های مرتبط

طراحی سایت اصفهان
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت