Question

我需要删除某些元素上设置的所有属性（使用vanilla JS或jQuery），除了一些手动选择的元素。可以说我有一张图片：

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

我想要这个结果：

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

我能想到的唯一方法是.removeAttr()每一个属性。但问题是有时元素具有W3C规范中不存在的属性。我想删除所有其他未列入白名单的属性。

你会怎么做？

Answer 1

这是一个迭代attributes列表的解决方案。

~~我实际上只将其值设置为""（空字符串），因为出于某种原因，removeAttribute()在到达border属性时失败。调查...~~

试一试：

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

Answer 2

<div id="container"><img id="img" hspace="4" border="1" vspace="4" src="someimage.jpg" alt="somealt">
</div>
<textarea rows="15" cols="80" id="dbg"></textarea>

和javascript：

$('#dbg')[0].value += $('#container').html();
atts = $("#img")[0].attributes;
var img = $("#img"); //since it may remove id as well
for (var i = atts.length - 1; i >= 0; i--) {
    var name = atts[i].name;
    if (name != 'src' && name != 'alt') { //you can implement an array or other thing
        img.removeAttr(name);
    }
}

$('#dbg')[0].value += $('#container').html();

在此尝试：http://jsfiddle.net/drZhu/

Answer 3

我通常不喜欢下拉到原始js DOM，除非在使用jQ时绝对必要，所以提供纯粹的jQ解决方案：

$('img').each(function() {
    var e = $(this);
    var whitelist = ['src','title'];
    $.each(this.attributes, function(attr, value){
       if($.inArray(attr, whitelist) == -1) {
           e.removeAttr(attr);
       }
    });
});

Answer 4

根据具体情况，您可以创建一个新元素，根据白名单复制旧元素的属性，然后替换;或者你可以将它转换为HTML字符串并解析它。但是，如果你需要从jQuery中清理元素，你可能会做错事。你想达到什么目的？

基于白名单删除元素的所有属性

4 个答案: