如何使用jQuery移除所有包含margin-的CSS类？

嘿，这个需求其实用jQuery的removeClass()就能搞定，关键是利用它支持函数参数的特性来过滤类名！

方法一：jQuery实现 #

直接给removeClass()传一个函数，函数里我们可以筛选出所有包含margin-的类，然后返回这些类名让它移除：

// 替换成你需要操作的元素选择器，比如'.target'或者直接$('div')
$('你的元素选择器').removeClass(function(index, currentClass) {
  // 用正则匹配所有以margin-开头的完整类名
  const marginClasses = currentClass.match(/\bmargin-\S+/g);
  // 如果有匹配到的类，就返回空格分隔的字符串；没有的话返回空
  return marginClasses ? marginClasses.join(' ') : '';
});

代码解释：

• \b是单词边界，确保我们只匹配完整的类名（不会误匹配像xmargin-15这种带前缀的）
• margin-\S+匹配所有以margin-开头、后面跟着非空白字符的类名
• match()会返回所有匹配到的类名数组，没有匹配到就返回null，所以我们用三元表达式处理空情况

举个例子：如果元素原来的类是card margin-15 padding-20 margin-30，执行完之后就会变成card padding-20。

方法二：原生JavaScript实现（不用jQuery） #

如果你项目里没用到jQuery，用原生JS也能轻松实现：

// 选择所有需要处理的元素
const elements = document.querySelectorAll('你的元素选择器');
elements.forEach(element => {
  // 把类列表转成数组，过滤掉以margin-开头的类，再重新设置
  element.className = Array.from(element.classList)
    .filter(className => !className.startsWith('margin-'))
    .join(' ');
});

这个逻辑更直观：把元素的类列表转成数组，过滤掉不符合要求的类，再拼接成字符串重新赋值给className。

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