js实现removeclass

使用 classList 方法

现代浏览器支持 classList 属性，提供 remove() 方法直接移除指定类名。适用于单个或多个类名的移除。

// 移除单个类名
element.classList.remove('className');

// 移除多个类名
element.classList.remove('class1', 'class2');

使用 className 和正则表达式

通过修改 className 属性，结合正则表达式替换目标类名。兼容性较好，但需注意处理多余空格。

function removeClass(element, className) {
  element.className = element.className.replace(
    new RegExp('(^|\\s)' + className + '(\\s|$)', 'g'),
    ' '
  ).trim();
}

使用 jQuery 方法

如果项目中已引入 jQuery，可直接使用其 removeClass() 方法，支持链式调用和多个类名操作。

// 移除单个类名
$('#element').removeClass('className');

// 移除多个类名
$('#element').removeClass('class1 class2');

处理 SVG 元素的类名

SVG 元素需使用 getAttribute() 和 setAttribute() 操作类名，因为部分旧版浏览器不支持 SVG 的 classList。

var svgElement = document.getElementById('svg-element');
var classes = svgElement.getAttribute('class').split(' ');
classes = classes.filter(cls => cls !== 'targetClass');
svgElement.setAttribute('class', classes.join(' ').trim());

注意事项

• 移除不存在的类名不会报错。
• 使用正则表达式方法时需转义特殊字符。
• 多次移除同类名时，classList 性能优于字符串操作。
• 批量操作建议使用 document.querySelectorAll() 遍历元素。