Remove multiple html5 data-attributes with jquery
Solution 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 here: http://jsfiddle.net/Gpqh5/
Solution 2
In my jQuery placeholder plugin, I’m using the following to get all the attributes for a given element:
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;
}
Note that elem
is an element object, not a jQuery object.
You could easily tweak this, to get only data-*
attribute names:
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;
}
You could then loop over the resulting array, and call removeAttr()
for each item on the element.
Here’s a simple jQuery plugin that should do the trick:
$.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/);
Solution 3
Vanilla JS below clears all data attributes. If you want to add some if
logic to remove a subset of data attributes, it should be trivial to add that functionality to the below 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);
}
}
}
![Joonas](https://i.stack.imgur.com/Z3THt.png?s=256&g=1)
Joonas
Some projects: ScriptUI Dialog Builder Audible Library Extractor GW 2 crafting guide
Updated on June 12, 2022Comments
-
Joonas about 2 years
So jquery api says the following:
Removing data from jQuery's internal .data() cache does not effect any HTML5 data- attributes in a document; use .removeAttr() to remove those.
I have no problem removing a single data-attribute.
<a title="title" data-loremIpsum="Ipsum" data-loremDolor="Dolor"></a> $('a').removeAttr('data-loremipsum');
The question is, how can I remove multiple data-attributes?
More details:
The starting point is that I have multiple ( let's say.. 60 ) different data-attributes and I want to remove all of them.
Preferred way would be to target only those data-attributes that contain the word
lorem
. In this caselorem
is always the first word. (or second if you countdata-
)Also I'd like to keep all the other attributes intact
-
stian.net over 12 yearsI think you will have to use the .attr() function to loop through all the attributes and remove if name contains specific string..
-
Mathias Bynens over 12 yearsNote that this code is entirely untested (except the snippet from my plugin) but it should give you an idea of how to solve it. Good luck!
-
UTCWebDev about 6 yearsWhat if the attribute contains keys with additional dash separators such as data-lorem-ipsum="azbqat"? In the example above, those would not be removed.
-
biziclop over 5 yearsHi, shouldn't it simply do
el.removeAttribute(attrs[i].name);
without usingthisAttributeString
?