如何使用jQuery删除所有类？

Question

我有一些上下按钮，通过向包含元素添加类来增加/减小所选文本的大小，例如：

<span class="font20">Some text</span>

font20类设置font-size:20px，font21 设置font-size: 21px，以此类推。

我还有另一个名为“清除格式”的按钮，需要删除我添加的任何类。我可以检查是否应用了font20，如果是则将其删除。否则，检查是否应用了font21，如果是则将其删除，以此类推并进行50个或更多可能性的操作。但我更愿意做的是像下面这样：

jQuery('selector').removeClass("*");

也就是说，删除可能添加的所有类。上面的removeClass("*")似乎无效。是否有另一种使用jQuery删除应用于选择器的所有类的方法呢？

谢谢。

- Steve

---

removeClass("*") 会尝试移除一个名为 * 的类。而且你似乎没有阅读文档中的说明："如果在参数中未指定类名，则将删除所有类。" - Felix Kling

使用通配符选择器 $("class*=font")。 - Anthony

Anthony，你能否简单介绍一下 $("class*=font") 这个结构，或者给我提供一些相关文档资料吗？谢谢。- Steve - Steve

Answer 1

只需使用

jQuery('selector').removeClass();

删除所有类。

- Grégory OBANOS

Answer 2

根据文档:

如果将类名作为参数传入，则只会从匹配的元素中移除该类。如果参数中未指定类名，则移除所有类。

因此，只需使用：

$('#whatever').removeClass();

将从#whatever中删除所有的类。

- Jane S

---

那不是 OP 想要的。 - Artjom B.

重新阅读问题。你是对的，这不是整个解决方案，但它将根据问题删除所有类。 - Jane S

Answer 3

使用 attr() 方法：

selector$.attr("class", "");

- John Bupit

Answer 4

当我想保留一个基类并删除任何动态添加的类时，我会像下面这样做:

我会给元素添加一个带有默认类的数据属性。

<span class="default dynamic" data-class="default">Text</span>

然后，为了重置它，我只需将data-class元素应用于class。

var defaultClass = $('span').attr('data-class');
$('span').attr('class', defaultClass);

- matthoiland

Answer 5

调用removeClass时不传递参数，将会移除该元素的所有类。

$("span").removeClass();

- astrocrack

Answer 6

如果你只想移除通过按钮添加的类，那么 jQuery 允许你在一次调用中移除几个（以空格分隔的）类：

selector$.removeClass("font1 font2 font3 fontx");

如果您希望删除所有类，而不管是通过格式化按钮添加的还是其他方式添加的，可以执行以下操作：

selector$.removeClass();

- Precastic

Answer 7

这里有一段代码示例，可以展示如何解决这个问题。我假设你只想删除与特定格式匹配的类（即font##格式）。

你可以向jQuery对象添加一个函数，该函数可在jQuery对象上调用。然后，该函数将检查元素包含的类列表，并将每个类与您的模式进行匹配。

(function($) {
    $.fn.removeMatchingClasses = function(expression) {
        var $element    = $(this);
        var classString = $element.attr('class');
        if(classString !== undefined) {
            $(classString.split(' ')).each(function() {
                var str = (this + '');
                if(str.match(expression)) {
                    $element.removeClass(str);
                }
            });
        }
    };
})(jQuery);

$(document).ready(function() {
    $("span").each(function() {
        // remove all classes from this element matching font(number)
        $(this).removeMatchingClasses(/^font([0-9]+)$/);
    });
});

这段代码将保留元素中所有不匹配的类，并仅删除匹配的类。

一些参考资料：

• https://api.jquery.com/attr/（用于确定类）
• http://www.w3schools.com/jsref/jsref_match.asp（用于将类与模式匹配）

- Bas Groothedde

---

谢谢。你正在解决一个比我现在遇到的问题更复杂的问题，但我会保存这篇文章以备后用。 - Steve