如何使用变量移除元素的多个CSS类？附相关拖拽代码片段

好的，我来帮你解决这个问题。先梳理下你的代码逻辑：你在拖拽时把元素的类存储到了dataTransfer里，但这里有个小细节需要调整，再给你两种高效移除多个类的方法。

第一步：修复拖拽时的类存储逻辑 #

你当前的drag函数里直接存了ev.target.classList，但classList是DOMTokenList对象，转成字符串后可能会有格式问题。更稳妥的是用className属性（它本身就是空格分隔的类名字符串）：

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
  // 改用className获取标准的空格分隔类字符串
  ev.dataTransfer.setData("class", ev.target.className);
}

第二步：批量移除多个类的两种方法 #

当你在drop函数里拿到存储的类字符串后，需要把它转换成类名数组，再批量移除。这里有两种常用方案：

方案1：使用forEach循环逐个移除 #

适合所有浏览器，逻辑清晰：

function drop(ev, id, classelement) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  var classs = ev.dataTransfer.getData("class");
  
  // 先处理你的添加类逻辑（优化成批量添加）
  const classesToAdd = classs.split(' ').filter(cls => cls); // 过滤空字符串
  document.getElementById(id).classList.add(...classesToAdd);
  
  // 处理移除多个类：假设classelement是目标元素的ID或元素对象
  const targetElement = typeof classelement === 'string' 
    ? document.getElementById(classelement) 
    : classelement;
  
  if (targetElement) {
    // 拆分类字符串为数组，过滤空值后逐个移除
    classesToAdd.forEach(cls => {
      targetElement.classList.remove(cls);
    });
  }
}

方案2：利用classList.remove的多参数特性（更简洁） #

Element.classList.remove()本身支持传入多个类名参数，所以可以用ES6的扩展运算符把数组展开直接传入：

function drop(ev, id, classelement) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  var classs = ev.dataTransfer.getData("class");
  
  const classes = classs.split(' ').filter(cls => cls);
  // 批量添加
  document.getElementById(id).classList.add(...classes);
  
  // 批量移除
  const targetElement = typeof classelement === 'string' 
    ? document.getElementById(classelement) 
    : classelement;
  
  if (targetElement) {
    // 扩展运算符直接展开数组作为多个参数
    targetElement.classList.remove(...classes);
  }
}

注意事项 #

• 一定要用filter(cls => cls)过滤空字符串：因为如果元素的className开头/结尾有空格，split(' ')会产生空的字符串项，虽然classList.remove()传入空值不会报错，但过滤掉更干净。
• 如果需要兼容ES6之前的旧浏览器，可以用apply替代扩展运算符：

  targetElement.classList.remove.apply(targetElement.classList, classes);
  

内容的提问来源于stack exchange，提问作者Eric Anthony Wu