Question

I need to remove all attributes set on certain elements (using vanilla JS or jQuery), except for a few manually selected ones. Lets say I have an image:

<img hspace="4" border="1" vspace="4" src="someimage.jpg" alt="somealt" />

and I want this as result:

<img src="someimage.jpg" alt="somealt" />

The only way I could think of is to .removeAttr() every single attribute. But the problem is that some times elements have attributes that are don’t exist in the W3C specification. I want to remove all other attributes that are not whitelisted.

how would you do this?

Answer 1

Here’s a solution that iterates over the attributes list.

I’m actually only setting its value to "" (empty string), because for some reason, removeAttribute() fails when it gets to the border attribute. Investigating…

Give it a try:

var whitelist = ["src","alt"];

$('img').each(function() {
    var attributes = this.attributes;
    var i = attributes.length;
    while( i-- ) {
        var attr = attributes[i];
        if( $.inArray(attr.name,whitelist) == -1 )
            this.removeAttributeNode(attr);
    }
});​