スライドメニュー classList.removeの記述

前提・実現したいこと

CSSとJavaScriptでスライドメニューを作ってます
メニューをhoverすると子メニューが開きます
子メニューをクリックするとメニューを閉じる動作をさせたいのですが、classList.removeを使えば実現できるのかと考えてるのですがどのように記述したらいいかわからず悩んでます

該当のソースコード

HTML
1<ul class="cp_sidebarmenu">
2
3<li style="width:100%;height:100%"><a href="#" style="width:100%;height:100%"><span style="width:100%;height:100%">メニュー</span></a>
4<ul style="width:100px;height:100%">
5
6
7<li id="afaf" style="width:100%;height:100%"><a href="#" style="width:100%;height:100%"><span style="display: inline-block;width:100%;height:100%" onclick="document.getElementById('afaf').classList.remove('cp_sidebarmenu')">子メニュー</span></a></li>
8</ul>
9</li>
10
11</ul>

該当のソースコード

CSS
1html,
2body {
3overflow-x: hidden;
4width:100%;
5height: 100%;
6margin: 0;
7padding: 0;
8}
9.cp_sidebarmenu {
10width:10%;
11font-size: 0;
12position: absolute;
13z-index: 10;
14top: 0;
15left: 0;
16height: 100%;
17padding: 0.6em 0;
18text-align: center;
19color: white;
20background: #2ECCFA;
21}
22.cp_sidebarmenu li {
23height: 100%;
24
25position: relative;
26display: inline-block;
27list-style: none;
28-webkit-transform: translateZ(0);
29transform: translateZ(0);
30vertical-align: middle;
31pointer-events: none;
32}
33.cp_sidebarmenu a {
34font-size: 16px;
35line-height: 100%;
36position: relative;
37display: block;
38
39-webkit-transition: background 0.3s;
40transition: background 0.3s;
41text-decoration: none;
42pointer-events: auto;
43color: #ffffff;
44}
45.cp_sidebarmenu a:active,
46.cp_sidebarmenu a:focus {
47background: #2ECCFA;
48}
49.cp_sidebarmenu i {
50font-size: 2em;
51display: block;
52margin-bottom: 0.2em;
53}
54.cp_sidebarmenu span {
55font-size: 0.625em;
56}
57.cp_sidebarmenu li:hover ul {
58-webkit-transform: translateX(0);
59transform: translateX(0);
60background: #2ECCFA;
61}
62.cp_sidebarmenu > li {
63height:10%;
64display: block;
65}
66.cp_sidebarmenu > li > a {
67height:100%;
68background: #0000FF;
69}
70.cp_sidebarmenu > li > a > span {
71display: inline-block;
72height:100%;
73
74}
75.cp_sidebarmenu > li:hover {
76z-index: 100;
77}
78.cp_sidebarmenu > li:hover a {
79background: #2ECCFA;
80}
81.cp_sidebarmenu > li a:hover {
82background: #CEECF5;
83}
84.cp_sidebarmenu > li:hover a:after {
85opacity: 1;
86}
87.cp_sidebarmenu > li ul {
88position: absolute;
89z-index: -1;
90top: 0;
91left: 100%;
92width: auto;
93height: 100%;
94-webkit-transition: 0.5s -webkit-transform;
95transition: 0.5s -webkit-transform;
96transition: 0.5s transform;
97transition: 0.5s transform, 0.5s -webkit-transform;
98-webkit-transform: translateX(-100%);
99transform: translateX(-100%);
100white-space: nowrap;
101background: #2ECCFA;
102padding: 0;
103}
104