删除所有属性

Question

是否可以使用jQuery一次性删除所有属性？

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

到

<img>

我尝试了$('img').removeAttr('*');但没有成功。有人知道怎么解决吗？

- David Hellsing

---

不好的想法，你应该只删除你知道的属性，一个DOM元素有比你在标签中指定的更多的属性，每个属性都有自己的默认值或计算值。 - row1

我尝试在Vue中使用user993683的答案。它起作用了，但之后我的样式表现得很奇怪。我检查了属性，发现有一个名为data-v的属性。原来Vue使用它来应用作用域样式。我很快就找到了问题所在，但是当使用这些解决方案时，我会小心谨慎。特别是在使用框架时。 - dev7

Answer 1

一个不需要 JQuery 的简单方法：

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

- user1846065

---

如果您选择了一个 JQuery 对象，请小心。在使用此方法之前，您需要将其转换为 htmlElement（$elem.get(0)）。 - Gabriel GM

我不确定为什么所有的例子都包含类似于“elem.attributes.length”的内容。在我看来，更快的方法是这样的：while (elem.attributes[0]) { elem.attributes.removeNamedItem(elem.attributes[0].name);
} - portal TheAnGeLs

Answer 2

更新：之前的方法在IE8中可以使用，但在IE8兼容模式和之前的版本中无法使用。因此，这里提供一种使用jQuery来移除属性的版本，它可以更好地完成这项工作：

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

当然，你可以将其制作成插件：http://docs.jquery.com/Plugins/Authoring。

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

然后执行：

$("img").removeAttributes();

- cletus

---

我刚刚看到这个，希望能够一次性在所有电脑上永久锁定IE，并且只允许一个指向Chrome下载页面的选项卡工作。那将是非常棒的！（不，我不是说允许IE 9或10 - IE 6太糟糕了，以至于IE 9和10应该受到惩罚！） - ClarkeyBoy

你为什么要运行两个循环（map和each）？当需要从大量元素中删除属性时，这是性能低效的。你可以轻松地将它们合并成一个单独的循环：$.each(this.attributes, function(i, item) { img.removeAttr(item.name) }); - Nik Sumeiko

@manakor，1个循环不起作用的原因是removeAttr改变了this.attributes，从而打破了迭代，并且找到的“item”未定义。我刚试过了。 - ZeroGravityChimp

@ZeroGravityChimp 从属性数组的末尾开始循环，以避免由于长度变化而跳过元素：for (var i = this.attributes.length -1; i >= 0 ; i--) { img.removeAttr(this.attributes[i].name); } - Nik Sumeiko

@manakor 抱歉，我说错了，没有无限循环。只是建议为了避免错误，最好明确地提取迭代列表，而不是在进行更改时修改集合。 - ZeroGravityChimp

Answer 3

一行代码，无需jQuery：

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

- user993683

Answer 4

不需要创建一个新的 jQuery.fn.removeAttributes（在被接受的答案中演示），你可以扩展 jQuery 现有的 .removeAttr() 方法，使其接受零个参数以从集合中的每个元素中删除所有属性：

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

现在您可以调用.removeAttr()而不带参数，以从元素中删除所有属性：

$('img').removeAttr();

- Nik Sumeiko

Answer 5

为特定标签执行此操作的一个非常好的理由是清理遗留内容并强制执行标准。

例如，假设您想要删除遗留属性或通过剥离它们来限制由FONT标记属性引起的损坏。

我尝试了几种方法来实现这一点，包括上面的示例，但都没有达到预期的效果。

示例1：将所有FONT标记替换为包含的文本内容。这将是完美的解决方案，但自v1.6.2以来已停止运行。 :(

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

示例2：从命名标签中删除所有属性 - 例如FONT。 再次说明，这个功能不能正常运行，但我确信它曾经在以前的jQuery版本中起作用。

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

期待1.7版本，该版本承诺提供一种按名称删除多个属性的方法。

- Panoone

Answer 6

现在我们有removeAttributeNode方法，就不需要再引用属性名来引用id了。

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

- shabunc

Answer 7

一行代码。

对于jQuery用户

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

- steven7mwesigwa

Answer 8

这将删除所有属性，并适用于每种类型的元素。

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

- Ahmet Can Güven

---

这也会移除事件绑定。 - John Kurlak

下投票的原因是什么？ - Ahmet Can Güven

Answer 9

我不确定你的具体需求，但你考虑过使用CSS类并切换它们吗？这样可以减少你的编码工作量，也可以减轻浏览器的负担。如果你需要动态生成一些属性，比如宽度和高度，这种方法可能不太容易实现。

- sjobe

Answer 10

今天我遇到了同样的问题。我认为这对你有用。

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

- Стас Пишевский