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

A simple method that doesn't require JQuery:

while(elem.attributes.length > 0)
    elem.removeAttribute(elem.attributes[0].name);

Answer 2

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 3

One-liner, no jQuery needed:

[...elem.attributes].forEach(attr => elem.removeAttribute(attr.name));

Answer 4

Instead of creating a new jQuery.fn.removeAttributes (demonstrated in the accepted answer) you can extend jQuery's existing .removeAttr() method making it accept zero parameters to remove all attributes from each element in a set:

var removeAttr = jQuery.fn.removeAttr;
jQuery.fn.removeAttr = function() {

  if (!arguments.length) {
    this.each(function() {

      // Looping attributes array in reverse direction
      // to avoid skipping items due to the changing length
      // when removing them on every iteration.
      for (var i = this.attributes.length -1; i >= 0 ; i--) {
        jQuery(this).removeAttr(this.attributes[i].name);
      }
    });

    return this;
  }

  return removeAttr.apply(this, arguments);
};

Now you can call .removeAttr() without parameters to remove all attributes from the element:

$('img').removeAttr();

Answer 5

One-liner.

For jQuery users

$('img').removeAttr(Object.values($('img').get(0).attributes).map(attr => attr.name).join(' '));

Answer 6

One don't need to refer to the name of attribute to to id nowadays, since we have removeAttributeNode method.

while(elem.attributes.length > 0) {
    elem.removeAttributeNode(elem.attributes[0]);
}

Answer 7

One very good reason to do this for specific tags is to clean up legacy content and also enforce standards.

Let's say, for example, you wanted to remove legacy attributes, or limit damage caused by FONT tag attributes by stripping them.

I've tried several methods to achieve this and none, including the example above, work as desired.

Example 1: Replace all FONT tags with the contained textual content. This would be the perfect solution but as of v1.6.2 has ceased to function. :(

$('#content font').each(function(i) {
   $(this).replaceWith($(this).text());
});

Example 2: Strip all attributes from a named tag - e.g. FONT. Again, this fails to function but am sure it used to work once upon a previous jQuery version.

$("font").each(function() {
 // First copy the attributes to remove.
 var attributes = $.map(this.attributes, function(item) {
   return item.name;
 });     
 // Now remove the attributes
 var font = $(this);
 $.each(attributes, function(i, item) {
   $("font").removeAttr(item);
 });
});

Looking forward to 1.7 which promises to include a method to remove multiple attributes by name.

Answer 8

This will remove all attributes and it will work for every type of element.

    var x = document.createElement($("#some_id").prop("tagName"));
    $(x).insertAfter($("#some_id"));
    $("#some_id").remove();

Answer 9

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 10

Today I have same issue. I think that it will be useful for you

var clone = $(node).html();
clone = $('<tr>'+ clone +'</tr>');
clone.addClass('tmcRow');