能否在this.classList.remove中使用变量？多类名移除报错问题

为什么会报错？ #

你遇到的InvalidCharacterError是因为**classList.remove()方法不接受包含空格的单个字符串作为参数**。

当你传入RF.DangerClass（值为'uk-form-danger uk-animation-shake'）时，浏览器会把这个带空格的字符串当成一个完整的类名，但HTML规定类名不能包含空格，所以直接触发了无效字符的错误。这和你使用变量本身无关，问题出在变量的值的格式不符合方法的参数要求。

正确移除多个类名的方法 #

classList.remove()支持传入多个单独的类名字符串作为参数，所以我们只需要把包含多个类名的字符串拆分成单个类名，再传递给方法即可，有两种常用方式：

方式1：使用扩展运算符拆分字符串

利用split(' ')把空格分隔的字符串拆成数组，再用扩展运算符...把数组元素展开为独立参数：

this.classList.remove(...RF.DangerClass.split(' '));

这段代码会先把'uk-form-danger uk-animation-shake'拆成['uk-form-danger', 'uk-animation-shake']，再展开成两个参数传给remove，实现一次性移除两个类。

方式2：逐个调用remove

如果类名数量固定，也可以直接分开调用remove方法，每个参数传一个类名：

this.classList.remove('uk-form-danger');
this.classList.remove('uk-animation-shake');

这种方式更直观，适合类名数量少且固定的场景。

额外提醒 #

不只是remove，classList.add()也遵循同样的规则：要添加多个类时，需要传入多个单独的字符串参数，而不是一个带空格的字符串。比如add('a', 'b')是正确的，add('a b')会尝试添加一个无效的类名"a b"，同样会触发错误。

内容的提问来源于stack exchange，提问作者progreccor