How to remove data- attribute from the div element?

Question

I have an html div element, which contains lot of HTML-5 data- attributes to store extra

data with element. I know that we can use removeAttr of jquery to remove specific attribute,

but i want to know that is there any way to remove data- all atonce?

T.J. Crowder · Accepted Answer · 2012-07-11 10:33:28Z

7

No, you have to loop through them and remove them individually. E.g.:

var $div = $("selector for the div"),
    attrs = $div[0].attributes,
    name,
    index;
for (index = attrs.length - 1; index >= 0; --index) {
    name = attrs[index].nodeName;
    if (name.substring(0, 5) === "data-") {
        $div.removeAttr(name);
    }
}

Live copy | source

...or something along those lines.

answered Jul 11, 2012 at 10:33

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

Mitya · Accepted Answer · 2012-07-11 10:40:08Z

6

Not aware of any wholesale way of doing this. You'd have to loop over the element's attributes with something like

var el = document.querySelector('p');
for (var i=0; i<el.attributes.length; i++)
    if (/^data-/i.test(el.attributes[i].name))
        el.removeAttribute(el.attributes[i].name);

answered Jul 11, 2012 at 10:40

Mitya

34.7k15 gold badges70 silver badges126 bronze badges

2 Comments

Mitya Over a year ago

Likewise you - not far away!

ariel Over a year ago

there's an error here, when you remove the attribute, the index changes, so you may skip two data attributes in a row. you have to { el.removeAttribute(el.attributes[i].name); i--; } or loop from the last to first

Collectives™ on Stack Overflow

How to remove data- attribute from the div element?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related