عرض مصدر jQuery/removeClass

<noinclude>{{DISPLAYTITLE:التابع <code>‎‎.removeClass()‎</code>‎ في jQuery}}</noinclude>
== <code>‎.removeClass( [className ] )‎</code> ==

=== القيم المعادة ===
يعيد كائنًا من النوع [[jQuery/jQuery|jQuery]].

=== الوصف ===
يحذف هذا التابع صنفًا واحدًا، أو عدَّة أصناف، أو جميع الأصناف من كل عنصر في مجموعة العناصر المطابقة.

=== <code>‎.removeClass( [className ] )‎</code> ===
أُضيف مع الإصدار: 1.0.

==== <code>className</code> ====
سلسلة نصيَّة تمثِّل اسم صنفٍ واحدٍ أو عدَّة أصناف مفصولة بمسافة يراد حذفها من الخاصِّيَّة <code>[[JavaScript/class|class]]</code> لكل عنصر مطابق.

=== <code>‎.removeClass( function )‎</code> ===
أُضيف مع الإصدار: 1.4.

==== <code>function</code> ====
دالة من الشكل <code>[[JavaScript/Function|Function]]( Integer index, String className )‎</code> والتي تعيد سلسلة نصية تمثِّل اسم صنفٍ واحدٍ أو عدَّة أصناف مفصولة بمسافة يراد حذفها. الوسائط التي يقبل هذا التابع أن تمرَّر إليه هي: فهرس موقع العنصر في المجموعة، قيمة الخاصِّيَّة <code>[[JavaScript/class|class]]</code> القديمة.

إن أُعطي اسم صنفٍ محدَّدٍ للتابع، فسيُحذَف ذلك الصنف بالتحديد فقط من كل عنصر في مجموعة العناصر المطابقة. إن لم يمرَّر أيَّ اسم لصنف، فستُحذف حينئذٍ جميع الأصناف.

كان بإمكان التابع <code>‎.removeClass()</code>‎ قبل الإصدار jQuery 1.12/2.2 تعديل الخاصِّيَّة الكائنيَّة <code>className</code> (أي property) الممرَّرة إليه للعنصر المحدَّد، وليس خاصِّيَّة <code>class</code> HTML (أي attribute). عندما تتغير الخاصِّيَّة الكائنيَّة، يُحدِّث المتصفح خاصِّيَّة HTML وفقًا لذلك. هذا يعني أنَّه عندما تُحدَّث خاصِّيَّة <code>class</code> HTML ويُحذَف آخر اسم للصنف، فقد يضبط المتصفح قيمة خاصِّيَّة HTML إلى سلسلة نصيِّة فارغة بدلًا من حذف الخاصِّيَّة كليًّا. تضمين هذا السلوك كان بسبب أن هذا التابع يعمل فقط في صفحات HTML DOM وليس في صفحات XML الصرفة مثلًا.

ابتداءً من الإصدار jQuery 1.12/2.2، تغير هذا السلوك من أجل توفير دعم لمستندات XML، ومن ضمنها SVG، وأصبحت خاصِّيَّة <code>class</code> HTML هي المستخدمة عوضًا عن الخاصِّيَّة الكائنيِّة. بناءً على ذلك، أصبح بالإمكان استعمال التابع <code>‎.removeClass()‎</code> مع مستندات XML أو SVG.

يمكن حذف عدَّة أصناف في الوقت ذاته من مجموعة العناصر المطابقة وذلك بفصل أسماء الأصناف بمسافة فارغة مثل:<syntaxhighlight lang="javascript">
$( "p" ).removeClass( "myClass yourClass" )
</syntaxhighlight>يُستعمَل هذا التابع غالبًا مع التابع <code>[[jQuery/addClass|‎.addClass()]]</code>‎ لتبديل أصناف العناصر بين بعضها بعضًا مثل:<syntaxhighlight lang="javascript">
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
</syntaxhighlight>حذفنا في الصنف myClass والصنف noClass من جميع الفقرات وأضفنا مكانها الصنف yourClass.

لتبديل أصناف محدَّدة مكان جميع الأصناف الموجودة، يمكننا استعمال <code>[[jQuery/attr|‎.attr( "class", "newClass" )‎]]</code> عوضًا عما سبق.

بدءًا من الإصدار jQuery، أصبح بالإمكان الإشارة إلى الصنف المراد حذفه بتمرير دالةٍ إلى التابع <code>‎.removeClass()</code>‎.<syntaxhighlight lang="javascript">
$( "li:last" ).removeClass(function() {
 return $( this ).prev().attr( "class" );
});
</syntaxhighlight>في هذا المثال، سيُحذف اسم الصنف للعنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> قبل الأخير.

=== أمثلة ===
حذف الصنف <code>"blue"</code> من جميع العناصر المطابقة:<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass مثالٌ عن استعمال التابع</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
  }
  .blue {
    color: blue;
  }
  .under {
    text-decoration: underline;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p class="blue under">مرحبًا</p>
<p class="blue under highlight">ثم</p>
<p class="blue under">وداعًا</p>
<p class="blue under">وإلى اللقاء</p>
 
<script>
$( "p:even" ).removeClass( "blue" );
</script>
 
</body>
</html>

</syntaxhighlight>حذف الصنف "blue" والصنف "under" من العناصر المطابقة:<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass مثالٌ عن استعمال التابع</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
  }
  .blue {
    color: blue;
  }
  .under {
    text-decoration: underline;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p class="blue under">مرحبًا</p>
<p class="blue under highlight">ثم</p>
<p class="blue under">وداعًا</p>
<p class="blue under">وإلى اللقاء</p>
 
<script>
$( "p:odd" ).removeClass( "blue under" );
</script>
 
</body>
</html>

</syntaxhighlight>حذف جميع الأصناف من العناصر المطابقة:<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass مثالٌ عن استعمال التابع</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
  }
  .blue {
    color: blue;
  }
  .under {
    text-decoration: underline;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p class="blue under">مرحبًا</p>
<p class="blue under highlight">ثم</p>
<p class="blue under">وداعًا</p>
<p class="blue under">وإلى اللقاء</p>
 
<script>
$( "p:eq(1)" ).removeClass();
</script>
 
</body>
</html>

</syntaxhighlight>

== مصادر ==
* [http://api.jquery.com/removeClass/ صفحة التابع ‎‎.removeClass()‎ في توثيق jQuery الرسمي.]
[[تصنيف:jQuery]]
[[تصنيف:jQuery Attributes]]
[[تصنيف:jQuery Manipulation]]