Rimuovi più data-attributi HTML5 con jQuery

Question

api Così jquery dice quanto segue:

Rimozione dei dati da .data interna di jQuery() della cache non effettua alcun HTML5 dati- attributi in un documento; usa .removeAttr() per rimuoverli.

Non ho alcun problema nella rimozione di un singolo attributo di dati.

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

---

La domanda è: come posso rimuovere più schede attributi?

Maggiori dettagli:

1. Il punto di partenza è che ho multipla (diciamo .. 60) diversi data-attributi e voglio rimuovere tutti loro.

2. Il modo preferito sarebbe di scegliere come target solo quegli attributi di dati che contengono la parola lorem. In questo caso lorem è sempre la prima parola. (O il secondo se si conta data-)

3. Inoltre mi piacerebbe mantenere tutti gli altri attributi intatti

Answer 1

// 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]); 
    } 
} 

Fiddle qui: http://jsfiddle.net/Gpqh5/

Answer 2

In my jQuery placeholder plugin, sto usando la seguente per avere tutti gli attributi per un determinato elemento :

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; 
} 

noti che elem è un oggetto elemento, non un oggetto jQuery.

si potrebbe facilmente modificare questo, per ottenere solo data-* nomi degli attributi:

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; 
} 

È quindi un loop all'interno di matrice risultante, e chiamare removeAttr() per ogni elemento sull'elemento.

Ecco un semplice plugin jQuery che dovrebbe fare il trucco:

$.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/); 

Answer 3

Purtroppo non è possibile in jQuery per selezionare i nomi degli attributi che inizia con un dato valore (per i valori degli attributi è possibile).

La soluzione più semplice che si avvicinò con:

$(document).ready(function(){ 
    $('[data-loremIpsum], [data-loremDolor]').each(function(index, value) { 
     $(this).removeAttr('data-loremIpsum') 
       .removeAttr('data-loremDolor'); 
    }); 
}); 

JsFiddle Demo (Assicurati di guardare il codice sorgente HTML dopo aver fatto clic run)

Answer 4

Pubblicherò anche una risposta, poiché mi ci è voluto del tempo per rendere la versione funzionante dal post di Mathias.

I problemi che ho avuto era che SVG ha bisogno di extra-cura, ci sono piccole sfumature (jQuery non piace), ma qui è il codice che dovrebbe funzionare per SVG così:

$.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); 
     }); 
    }); 
}; 

nota che sta usando il carattere di sottolineatura, ma è possibile sostituire _.each con $ .each credo.

utilizzati:

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-"); 

Answer 5

È possibile ciclo tutti gli attributi dei dati di elemento e filtro specifico per indice di una sub-stringa.

REMOVE_ATTR ho usato il metodo .removeAttr(), ma si può essere in grado di utilizzare il metodo .removeData() a seconda di come è stato creato il-attributo data. Sostituire o combinare come meglio credi.

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

SET NULL Opzionalmente si può anche impostare i dati-attributo a null a seconda della logica di business.

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

Answer 6

Vanilla JS seguito cancella tutti attributi dei dati. Se si desidera aggiungere un po 'di logica if per rimuovere un sottoinsieme di attributi di dati, dovrebbe essere banale aggiungere tale funzionalità al seguente 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); 
     } 
    } 
}