Hapus semua kelas yang dimulai dengan string tertentu

Saya memiliki div id="a"yang mungkin memiliki sejumlah kelas yang menyertainya, dari beberapa grup. Setiap kelompok memiliki prefiks tertentu. Di javascript, saya tidak tahu kelas mana dari grup yang ada di div. Saya ingin menghapus semua kelas dengan prefiks tertentu dan kemudian menambahkan yang baru. Jika saya ingin menghapus semua kelas yang dimulai dengan "bg", bagaimana cara melakukannya? Sesuatu seperti ini, tetapi itu benar-benar berfungsi:

$("#a").removeClass("bg*");

Dengan jQuery, elemen DOM sebenarnya berada di indeks nol, ini seharusnya berfungsi

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.*?\b/g, '');

Pemisahan regex pada batas kata \bbukanlah solusi terbaik untuk ini:

var prefix = "prefix";
var classes = el.className.split(" ").filter(function(c) {
    return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = classes.join(" ").trim();

atau sebagai mixin jQuery:

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};

Pembaruan ES6 2018:

const prefix = "prefix";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();

Saya telah menulis plugin jQuery sederhana - alterClass , yang melakukan penghapusan kelas wildcard. Secara opsional akan menambahkan kelas juga.

$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' ) 

Anda tidak memerlukan kode khusus jQuery untuk menangani ini. Cukup gunakan RegExp untuk menggantinya:

$("#a").className = $("#a").className.replace(/\bbg.*?\b/g, '');

Anda dapat memodifikasi ini untuk mendukung awalan apa pun tetapi metode yang lebih cepat ada di atas karena RegExp hanya akan dikompilasi sekali:

function removeClassByPrefix(el, prefix) {
    var regx = new RegExp('\\b' + prefix + '.*?\\b', 'g');
    el.className = el.className.replace(regx, '');
    return el;
}

Menggunakan tanda tangan kedua dari $.fn.removeClass:

// Considering:
var $el = $('<div class="  foo-1 a b foo-2 c foo"/>');

function makeRemoveClassHandler(regex) {
  return function (index, classes) {
    return classes.split(/\s+/).filter(function (el) {return regex.test(el);}).join(' ');
  }
}

$el.removeClass(makeRemoveClassHandler(/^foo-/));
//> [<div class=​"a b c foo">​</div>​]

http://www.mail-archive.com/[email protected]/msg03998.html mengatakan:

... dan .removeClass () akan menghapus semua kelas ...

Ini bekerja untuk saya;)

Bersulang

Pendekatan yang akan saya gunakan menggunakan konstruksi jQuery sederhana dan fungsi penanganan array, adalah mendeklarasikan fungsi yang mengambil id dari kontrol dan awalan kelas dan menghapus semua yang diklasifikasikan. Kode terlampir:

function removeclasses(controlIndex,classPrefix){
    var classes = $("#"+controlIndex).attr("class").split(" ");
    $.each(classes,function(index) {
        if(classes[index].indexOf(classPrefix)==0) {
            $("#"+controlIndex).removeClass(classes[index]);
        }
    });
}

Sekarang fungsi ini bisa dipanggil dari mana saja, dengan mengklik tombol atau dari kode:

removeclasses("a","bg");

Saya sedang mencari solusi untuk masalah yang persis sama. Untuk menghapus semua kelas dimulai dengan awalan "fontid_" Setelah membaca artikel ini saya menulis sebuah plugin kecil yang saya gunakan sekarang.

(function ($) {
        $.fn.removePrefixedClasses = function (prefix) {
            var classNames = $(this).attr('class').split(' '),
                className,
                newClassNames = [],
                i;
            //loop class names
            for(i = 0; i < classNames.length; i++) {
                className = classNames[i];
                // if prefix not found at the beggining of class name
                if(className.indexOf(prefix) !== 0) {
                    newClassNames.push(className);
                    continue;
                }
            }
            // write new list excluding filtered classNames
            $(this).attr('class', newClassNames.join(' '));
        };
    }(fQuery));

Pemakaian:

$('#elementId').removePrefixedClasses('prefix-of-classes_');

Untuk browser modern:

let element = $('#a')[0];
let cls = 'bg';

element.classList.remove.apply(element.classList, Array.from(element.classList).filter(v=>v.startsWith(cls)));

Saya tahu ini pertanyaan lama, tetapi saya menemukan solusi baru dan ingin tahu apakah ada kerugiannya?

$('#a')[0].className = $('#a')[0].className
                              .replace(/(^|\s)bg.*?(\s|$)/g, ' ')
                              .replace(/\s\s+/g, ' ')
                              .replace(/(^\s|\s$)/g, '');

Dalam satu baris ... Menghapus semua kelas yang cocok dengan ekspresi reguler someRegExp

$('#my_element_id').removeClass( function() { return (this.className.match(/someRegExp/g) || []).join(' ').replace(prog.status.toLowerCase(),'');});

Jawaban Prestaul sangat membantu, tetapi tidak berhasil bagi saya. Cara jQuery untuk memilih objek berdasarkan id tidak berfungsi. Saya harus menggunakan

document.getElementById("a").className

dari pada

$("#a").className

Saya juga menggunakan tanda hubung'- 'dan angka untuk nama kelas. Jadi versi saya menyertakan '\ d-'

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.\d-*?\b/g, '');

(function($)
{
    return this.each(function()
    {
        var classes = $(this).attr('class');

        if(!classes || !regex) return false;

        var classArray = [];

        classes = classes.split(' ');

        for(var i=0, len=classes.length; i<len; i++) if(!classes[i].match(regex)) classArray.push(classes[i]);

        $(this).attr('class', classArray.join(' '));
    });
})(jQuery);

$("#element").removeAttr("class").addClass("yourClass");