Remove all attributes

Question

Is it possible to remove all attributes at once using jQuery?

<img src="example.jpg" width="100" height="100">

to

<img>

I tried $('img').removeAttr('*'); with no luck. Anyone?

Answer 1

Update: the previous method works in IE8 but not in IE8 compatibility mode and previous versions of IE. So here is a version that does and uses jQuery to remove the attributes as it does a better job of it:

$("img").each(function() {
  // first copy the attributes to remove
  // if we don't do this it causes problems
  // iterating over the array we're removing
  // elements from
  var attributes = $.map(this.attributes, function(item) {
    return item.name;
  });

  // now use jQuery to remove the attributes
  var img = $(this);
  $.each(attributes, function(i, item) {
    img.removeAttr(item);
  });
});

Of course you could make a plug-in out of it:

jQuery.fn.removeAttributes = function() {
  return this.each(function() {
    var attributes = $.map(this.attributes, function(item) {
      return item.name;
    });
    var img = $(this);
    $.each(attributes, function(i, item) {
    img.removeAttr(item);
    });
  });
}

and then do:

$("img").removeAttributes();

Answer 2

Why would you need to do this at all? What is the purpose of having an empty img? Maybe what you really need is to remove it or if you're searching to reset width and height, it's better to set this things with CSS and just switch classes.

Answer 3

I don't know exactly what you're using it for, but have you considered using css classes instead and toggling those ? It'll be less coding on your side and less work for the browser to do. This will probably not work [easily] if you're generating some of the attributes on the fly like with and height.

Answer 4

Bad idea, you should only remove what attributes you know about, a DOM element has a lot more attributes than what you specify in the tag each with their own default or calculated value.