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

Ratings
(0)

 

مسئله

ما می خواهیم عناصری را از DOM حذف کنیم.

راه حل

از متد remove() می توانیم برای حذف یک مجموعه از عناصر و عناصر فرزند آنها از DOM استفاده کنیم.به کدهای زیر توجه کنید:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
  <h3>Anchors</h3>
   <a href='#'>Anchor Element</a>
   <a href='#'>Anchor Element</a>
   <a href='#'>Anchor Element</a>
 <script type="text/JavaScript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/JavaScript">
  jQuery('a').remove();
 </script>
 </body>
</html>

 وقتی که کدهای بالا در یک مرورگر لود می شوند، عناصر لینک(anchor) در صفحه باقی می مانند تا اینکه جاوا اسکریپت اجرا شود. وقتی که ما از متد remove() برای حذف تمام عناصر لینک(a) از صفحه DOM استفاده کنیم، تنها یک عنصر <h3> در صفحه باقی می ماند. این نیز امکان دارد که متد مذکور را به یک عبارت(expression) پاس دهیم تا مجموعه عناصر را فیلتر کند تا حذف شوند. بعنوان مثال، کدهای ما می توانند طوری تغییر کنند تا تنها لینک هایی(anchors) که یک کلاس خاص دارند، حذف شوند:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
 <h3>Anchors</h3>
 <a href='#' class='remove'>Anchor Element</a>
 <a href='#'>Anchor Element</a>
 <a href='#' class="remove">Anchor Element</a>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
 jQuery('a').remove('.remove');
</script>
</body>
</html>

 توضیحات

وقتی که ما از متد remove() جی کوئری استفاده می کنیم، باید دو نکته را به خاطر داشته باشیم:

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

2. این متد تنها عناصر را از DOM حذف نمی کند، بلکه تمام ها رویدادها(event handlers) و داده های نهان(cache) داخلی که عناصر حذف شده ممکن است دربر داشته باشند را نیز حذف می کند.

{module کمک نقدی به نویسنده}

  • بازدید: 501

دیدگاه‌ها

0
احسان عباسی
5 years ago
thank you. if God wants, i try to write more.
Like Like نقل قول کردن
0
Kelvin
5 years ago
Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point.
You definitely know what youre talking about, why throw away your
intelligence on just posting videos to your site when you could be giving us something
enlightening to read?
Like Like نقل قول کردن

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال