ජාවාස්ක්‍රිප්ට් හි පන්තිවල අපහසුතාව

පණිවිඩ හැඩගැස්වීම සඳහා පන්ති කිහිපයක් අප සතුව ඇතැයි සිතමු:

css.success {
  color: green;
}
.warning {
  color: orange;
}
.error {
  color: red;
}

යම් අංගයක අපි සාර්ථක පණිවිඩයක් ප්‍රදර්ශනය කර එයට සාර්ථකත්වය සඳහා අදාළ පන්තිය පැවරූ බව සිතමු:

javascriptelem.classList.add('success');

දැන් අපි එම අංගයේම දෝෂ පණිවිඩයක් ප්‍රදර්ශනය කර එයට දෝෂය සඳහා අදාළ පන්තිය පැවරූ බව සිතමු:

javascriptelem.classList.add('error');

ප්‍රතිඵලයක් වශයෙන්, අංගය තුළ එකිනෙකට ගැටෙන පන්ති දෙකක් පවතිනු ඇත:

html<div id="elem" class="success error">
  text
</div>

එබැවින්, නව පන්තියක් එකතු කිරීමට පෙර, අපට මුලින්ම පෙර පන්තිය ඉවත් කළ යුතුය:

javascriptelem.classList.remove('success');
elem.classList.add('error');

මෙය එතරම් පහසු නොවේ, මන්ද අපට හැකියාව නොතිබිය හැකිය පෙර පන්තිය හරියටම කුමක්දැයි දැන ගැනීමට, එවිට අපට පන්ති සියල්ලම එකින් එක ඉවත් කළ යුතු වේ:

javascriptelem.classList.remove('success');
elem.classList.remove('warning');
elem.classList.add('error');