Safely remove multiple classes using a prefix
Avoiding pitfalls when iterating over classList
Writing a Web App with HTML and JavaScript means you deal with several classes on your DOM elements in order to visualize state changes. And there are some pitfalls to be aware of with regard to removal.
Assuming you want to open some kind of sidebar above a container. In this sidebar you have several buttons to show different content via JavaScript and a close button, which closes the sidebar again. You HTML code maybe looks like this:
1 | <html> |
By clicking on the open-sidebar
button, the sidebar is opened and the action, respectively the new state, is vizualized by adding an appropriate class to the parent sidebar element. In order to make it easy for the user, the default content (Content 1) will be loaded also and its state will be marked with another class.
1 | <aside class="sidebar open open-content1"> |
A click on of the other content buttons (let’s say Content 2), will replace the current content and the aside
classes will change into:
1 | <aside class="sidebar open open-content2"> |
Now we want to close the sidebar again, assuming that we don’t have stored the currently opened content in the JavaScript code…
What we have to do, is to iterate over all classes of aside
and remove those which starts with open
:
1 | let sidebar = document.getElementById("sidebar"); |
Both approaches have a pitfall: when the first class, starting with open
, is removed from the list, the length of the classList
array changes immediatly and we won’t reach the last class in the list … !
The solution is to find and remove all appropriate classes at once, for example by using RegEx
and a reusable helper function:
1 | function removeClassByPrefix(el, prefix) { |
Update, 24 Jan 2021
The first posted RegEx pattern didn’t worked properly, because it has found the prefix only and not the whole word, so I have updated the pattern.
You can try it out at RegExr.com - Remove Class By Prefix.
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will be shown here as a Webmention ... or you leave a good old comment with your GitHub account.
In case your blog software can't send Webmentions, you can use this form:
Webmentions
No Webmentions yet...
Comments