Remove multiple html5 data-attributes with jquery

Question

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 case lorem is always the first word. (or second if you count data-)
Also I'd like to keep all the other attributes intact

I think you will have to use the .attr() function to loop through all the attributes and remove if name contains specific string.. — stian.net
– stian.net, Commented Jan 23, 2012 at 8:35

buley · Accepted Answer · 2014-02-27 20:40:53Z

14

// 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/

edited Feb 27, 2014 at 20:40

buley

29.6k18 gold badges90 silver badges108 bronze badges

answered Jan 23, 2012 at 8:45

Andreas Eriksson

9,0278 gold badges52 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

UTCWebDev Over a year ago

What if the attribute contains keys with additional dash separators such as data-lorem-ipsum="azbqat"? In the example above, those would not be removed.

Mathias Bynens · Accepted Answer · 2012-01-23 08:35:24Z

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

Note 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!

Ronnie Smith · Accepted Answer · 2017-09-09 23:01:48Z

1

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

edited Sep 9, 2017 at 23:01

answered Sep 9, 2017 at 22:41

Ronnie Smith

18.8k7 gold badges89 silver badges99 bronze badges

1 Comment

biziclop Over a year ago

Hi, shouldn't it simply do el.removeAttribute(attrs[i].name); without using thisAttributeString?

Erti-Chris Eelmaa · Accepted Answer · 2016-04-07 22:10:25Z

I'll post answer as well, as it took me some time to make working version from Mathias post.

The problems I had was that SVG needs extra-care, there are little nuances(jQuery doesn't like it), but here is the code that should work for SVG as well:

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

note that it is using underscore, but you could replace _.each with $.each I believe.

Usage:

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

Tyler Rafferty · Accepted Answer · 2016-08-13 21:17:00Z

You can loop all of the data attributes of specific element and filter for index of a sub-string.

REMOVE_ATTR I used the .removeAttr() method, but you may be able to use the .removeData() method depending on how the data-attribute was created. Substitute or combine as you see fit.

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

SET NULL You can also optionally set the data-attribute to null depending on your business logic.

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

Alex Stephens · Accepted Answer · 2019-03-16 13:00:55Z

0

use the jQuery method removeData()

jQuery site states:

The .removeData() method allows us to remove values that were previously set using .data(). When called with the name of a key, .removeData() deletes that particular value. When called with no arguments, .removeData() removes all values.

The key part here is:

When called with no arguments, .removeData() removes all values.

https://api.jquery.com/removeData/

answered Mar 16, 2019 at 13:00

Alex Stephens

3,1361 gold badge41 silver badges46 bronze badges

Comments

Grrbrr404 · Accepted Answer · 2012-01-23 08:44:02Z

-3

Sadly it is not possible in jQuery to select attribute names that starts with a given value (for attribute values it is possible).

The easiest solution i came up with:

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

JsFiddle Demo (Make sure to look up the html source code after you clicked run)

answered Jan 23, 2012 at 8:44

Grrbrr404

1,80515 silver badges18 bronze badges

Collectives™ on Stack Overflow

Remove multiple html5 data-attributes with jquery

7 Answers 7

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related