de datos múltiples atributos de HTML5 con jQuery

Question

API jQuery Así dice lo siguiente:

Extracción de datos de .data interno de jQuery() caché no afecta a ninguna HTML5 Data- atributos en un documento; utiliza .removeAttr() para eliminarlos.

No tengo ningún problema para eliminar un solo atributo de datos.

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

---

La pregunta es, ¿cómo puedo eliminar datos múltiples atributos?

Más detalles:

1. El punto de partida es que tengo múltiple (digamos .. 60) diferentes-atributos de datos y quiero eliminar todos ellos.

2. La manera preferida sería apuntar solo a los atributos de datos que contienen la palabra lorem. En este caso, lorem es siempre la primera palabra. (O el segundo si se cuenta data-)

3. También me gustaría mantener todos los demás atributos intactos

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

violín aquí: http://jsfiddle.net/Gpqh5/

Answer 2

En my jQuery placeholder plugin, estoy usando el siguiente para obtener todos los atributos de un elemento dado :

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

Tenga en cuenta que es un objeto elem elemento, no un objeto jQuery.

Desde aquí se puede ajustar esto, para obtener sólo data-* nombres de atributos:

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

A continuación, podría bucle sobre la matriz resultante, y llamar a removeAttr() para cada elemento en el elemento.

Aquí es un simple plugin de jQuery que debe hacer el truco:

$.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

Por desgracia, no es posible en jQuery para seleccionar los nombres de atributos que comienza con un valor dado (para valores de atributos es posible).

La solución más fácil que ocurrió:

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

JsFiddle Demo (Asegúrese de buscar el código fuente HTML después de hacer clic plazo)

Answer 4

Voy a publicar una respuesta también, ya que me llevó algo de tiempo hacer una versión de trabajo desde la publicación de Mathias.

Los problemas que tuve fue que necesita SVG-cuidado, hay pequeños matices (jQuery no le gusta), pero aquí es el código que se debe trabajar para SVG, así:

$.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 que está usando subrayado, pero podrías reemplazar _ cada uno con $ .each, creo.

Uso:

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

Puede recorrer todos los atributos de datos de elemento de filtro y específica para el índice de una sub-cadena.

REMOVE_ATTR que utiliza el método .removeAttr(), pero puede ser capaz de utilizar el método .removeData() dependiendo de cómo se creó el atributo de datos. Sustituir o combinar como mejor le parezca.

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

SET NULL También puede configurar opcionalmente el atributo de datos para anular dependiendo de su lógica de negocio.

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

Answer 6

vainilla JS continuación borra todos atributos de datos. Si desea agregar un poco de lógica if para eliminar un subconjunto de atributos de datos, sería trivial agregar esa funcionalidad al siguiente 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); 
     } 
    } 
}