Supprimer plusieurs attributs de données html5 avec jquery

Donc jquery api est dit ce qui suit:

Suppression des données à partir de jQuery interne .de données() cache n'a pas pour effet de HTML5 données - les attributs d'un document; utiliser .removeAttr() pour les supprimer.

Je n'ai pas de problème de suppression d'un seul attribut data -.

<a title="title" data-loremIpsum="Ipsum" data-loremDolor="Dolor"></a>
$('a').removeAttr('data-loremipsum');

La question est, comment puis-je supprimer plusieurs attributs data -?

Plus de détails:

Le point de départ est que j'ai plusieurs ( disons.. 60 )
différents attributs data-et je veux supprimer tous les de la.
Manière préférée serait de cibler uniquement les données-les attributs qui contiennent le mot lorem. Dans ce cas lorem est toujours le premier mot. (ou deuxième si vous comptez data-)
Aussi j'aimerais bien garder tous les autres attributs intacte

source d'informationauteur Joonas

//Fetch an array of all the data
var data = $("a").data(),
    i;
//Fetch all the key-names
var keys = $.map(data , function(value, key) { return key; });
//Loop through the keys, remove the attribute if the key contains "lorem".
for(i = 0; i < keys.length; i++) {
    if (keys[i].indexOf('lorem') != -1) {
        $("a").removeAttr("data-" + keys[i]);
    }
}

Violon ici: http://jsfiddle.net/Gpqh5/

Dans mon jQuery espace réservé pluginje suis en utilisant ce qui suit pour obtenir tous les attributs d'un élément donné:

function args(elem) {
    //Return an object of element attributes
    var newAttrs = {},
        rinlinejQuery = /^jQuery\d+$/;
    $.each(elem.attributes, function(i, attr) {
        if (attr.specified && !rinlinejQuery.test(attr.name)) {
            newAttrs[attr.name] = attr.value;
        }
    });
    return newAttrs;
}

Noter que elem est un élément de l'objet, pas un objet jQuery.

Vous pouvez facilement ajuster cette, pour obtenir que data-* noms d'attribut:

function getDataAttributeNames(elem) {
    var names = [],
        rDataAttr = /^data-/;
    $.each(elem.attributes, function(i, attr) {
        if (attr.specified && rDataAttr.test(attr.name)) {
            names.push(attr.name);
        }
    });
    return names;
}

Vous pourriez alors en boucle sur le tableau qui en résulte, et l'appel removeAttr() pour chaque élément sur l'élément.

Ici est un simple plugin jQuery qui devrait faire l'affaire:

$.fn.removeAttrs = function(regex) {
    return this.each(function() {
        var $this = $(this),
            names = [];
        $.each(this.attributes, function(i, attr) {
                if (attr.specified && regex.test(attr.name)) {
                        $this.removeAttr(attr.name);
                }
        });
    });
};

//remove all data-* attributes
$('#my-element').removeAttrs(/^data-/);
//remove all data-lorem* attributes
$('#my-element').removeAttrs(/^data-lorem/);

Je vais poster la réponse, car il m'a fallu un certain temps pour faire version de travail de Mathias post.

Les problèmes que j'ai eu était que SVG a besoin de plus de soins, il y a des petites nuances(jQuery ne l'aime pas), mais ici, c'est le code qui devrait fonctionner pour SVG ainsi:

$.fn.removeAttrs = function(attrToRemove, attrValue) {
    return this.each(function() {
        var $this = $(this)[0];
        var toBeRemoved = [];
        _.each($this.attributes, function (attr) {
            if (attr && attr.name.indexOf(attrToRemove) >= 0) {
                if (attrValue && attr.value !== attrValue)
                    return;

                toBeRemoved.push(attr.name);
            }
        });

        _.each(toBeRemoved, function(attrName) {
            $this.removeAttribute(attrName);
        });
    });
};

noter que c'est à l'aide de soulignement, mais vous pouvez le remplacer _.chaque $.chaque je crois.

Utilisation:

svgMapClone
    .find('*')
    .addBack()
    .removeAttrs('svg-')
    .removeAttrs('context-')
    .removeAttrs('class', '')
    .removeAttrs('data-target')
    .removeAttrs('dynamic-cursor')
    .removeAttrs('transform', 'matrix(1, 0, 0, 1, 0, 0)')
    .removeAttrs("ng-");

Vous pouvez faire une boucle de tous les attributs de données de l'élément spécifique et filtre pour l'indice d'un sous-chaîne.

REMOVE_ATTR
J'ai utilisé le .removeAttr() méthode, mais vous peut être en mesure d'utiliser le .removeData() méthode selon la façon dont l'attribut data-a été créé. Remplacer ou de les combiner comme bon vous semble.

 $.each($('div').data(), function (i) {
      var dataName = i, criteria = "lorem";
      if (dataName.indexOf(criteria) >= 0) { 
          $('div').removeAttr("data-"+dataName);
      }
 });

SET NULL
Vous pouvez également définir l'attribut data-null selon votre logique métier.

$.each($('div').data(), function (i) {
    var dataName = i, criteria = "lorem";
    if (dataName.indexOf(criteria) >= 0) { 
       $('div').data(dataName, "");
    }
});

Vanille JS ci-dessous efface tous attributs de données. Si vous voulez ajouter un peu de if logique pour supprimer un sous-ensemble des attributs de données, il doit être facile à ajouter cette fonctionnalité au-dessous de JavaScript.

function clearDataAttributes(el){
    if (el.hasAttributes()) {
        var attrs = el.attributes;
        var thisAttributeString = "";
        for(var i = attrs.length - 1; i >= 0; i--) {
            thisAttributeString = attrs[i].name + "-" + attrs[i].value;
            el.removeAttribute(thisAttributeString);
        }
    }
}

-3

Malheureusement, il n'est pas possible en jQuery pour sélectionner les noms d'attribut qui commence avec une valeur donnée (pour les valeurs d'attribut, il est possible).

La solution la plus simple je suis venu avec:
```
$(document).ready(function(){
    $('[data-loremIpsum], [data-loremDolor]').each(function(index, value) {
        $(this).removeAttr('data-loremIpsum')
               .removeAttr('data-loremDolor');
    });
});
```
JsFiddle Démo (Assurez-vous de regarder le code source html après avoir cliqué sur "exécuter")

Vous devez vous connecter pour publier un commentaire.