使用jquery删除多个html5数据属性

因此，jquery api说明如下：

从jQuery的内部.data（）缓存中删除数据不会影响文档中的任何HTML5数据属性；使用.removeAttr（）删除这些

删除单个数据属性没有问题

<a title="title" data-loremIpsum="Ipsum" data-loremDolor="Dolor"></a>
$('a').removeAttr('data-loremipsum');

$（'a'）.removeAttr（'data-loremipsum'）；

---

问题是，如何删除多个数据属性

更多详情：

起点是我有多个（比如说..60） 不同的数据属性，我想删除它们

首选的方法是只针对那些包含单词

lorem

的数据属性。在这种情况下，

lorem

始终是第一个单词。（如果您计算

数据-

，则为秒）

另外，我想保持所有其他属性不变

在中，我使用以下方法获取给定元素的所有属性：

function args(elem) {
    // Return an object of element attributes
    var newAttrs = {},
        rinlinejQuery = /^jQuery\d+$/;
    $.each(elem.attributes, function(i, attr) {
        if (attr.specified && !rinlinejQuery.test(attr.name)) {
            newAttrs[attr.name] = attr.value;
        }
    });
    return newAttrs;
}

请注意，

elem

是一个元素对象，而不是jQuery对象

您可以轻松地对此进行调整，以仅获取

数据-*

属性名称：

function getDataAttributeNames(elem) {
    var names = [],
        rDataAttr = /^data-/;
    $.each(elem.attributes, function(i, attr) {
        if (attr.specified && rDataAttr.test(attr.name)) {
            names.push(attr.name);
        }
    });
    return names;
}

然后可以在结果数组上循环，并为元素上的每个项调用

removeAttr（）

下面是一个简单的jQuery插件，它应该可以做到这一点：

$.fn.removeAttrs = function(regex) {
    return this.each(function() {
        var $this = $(this),
            names = [];
        $.each(this.attributes, function(i, attr) {
                if (attr.specified && regex.test(attr.name)) {
                        $this.removeAttr(attr.name);
                }
        });
    });
};

// remove all data-* attributes
$('#my-element').removeAttrs(/^data-/);
// remove all data-lorem* attributes
$('#my-element').removeAttrs(/^data-lorem/);

---

遗憾的是，在jQuery中不可能选择以给定值开头的属性名称（对于属性值，这是可能的）

我想出的最简单的解决方案是：

$(document).ready(function(){
    $('[data-loremIpsum], [data-loremDolor]').each(function(index, value) {
        $(this).removeAttr('data-loremIpsum')
               .removeAttr('data-loremDolor');
    });
});

（确保在单击“运行”后查找html源代码）

//获取所有数据的数组
变量数据=$（“a”）.data（），
我
//获取所有键名
var keys=$.map（数据，函数（值，键）{return key；}）；
//循环遍历键，如果键包含“lorem”，则删除该属性。
对于（i=0；i

---

在这里拉小提琴：

我也会发布答案，因为我花了一些时间从Mathias post制作工作版本

我遇到的问题是SVG需要特别小心，有一些细微差别（jQuery不喜欢它），但下面的代码也应该适用于SVG：

$.fn.removeAttrs = function(attrToRemove, attrValue) {
    return this.each(function() {
        var $this = $(this)[0];
        var toBeRemoved = [];
        _.each($this.attributes, function (attr) {
            if (attr && attr.name.indexOf(attrToRemove) >= 0) {
                if (attrValue && attr.value !== attrValue)
                    return;

                toBeRemoved.push(attr.name);
            }
        });

        _.each(toBeRemoved, function(attrName) {
            $this.removeAttribute(attrName);
        });
    });
};

请注意，它使用的是下划线，但您可以将u.each替换为$。each，我相信

用法：

svgMapClone
    .find('*')
    .addBack()
    .removeAttrs('svg-')
    .removeAttrs('context-')
    .removeAttrs('class', '')
    .removeAttrs('data-target')
    .removeAttrs('dynamic-cursor')
    .removeAttrs('transform', 'matrix(1, 0, 0, 1, 0, 0)')
    .removeAttrs("ng-");

---

您可以循环特定元素的所有数据属性，并筛选子字符串的索引

删除属性 我使用了该方法，但您可能能够使用该方法，具体取决于数据属性的创建方式。根据您的需要进行替换或组合

 $.each($('div').data(), function (i) {
      var dataName = i, criteria = "lorem";
      if (dataName.indexOf(criteria) >= 0) { 
          $('div').removeAttr("data-"+dataName);
      }
 });

设置空值 您还可以根据业务逻辑选择将数据属性设置为null

$.each($('div').data(), function (i) {
    var dataName = i, criteria = "lorem";
    if (dataName.indexOf(criteria) >= 0) { 
       $('div').data(dataName, "");
    }
});

下面的示例将清除所有数据属性。如果您想添加一些

If

逻辑来删除数据属性的子集，那么将该功能添加到下面的JavaScript中应该很简单

function clearDataAttributes(el){
    if (el.hasAttributes()) {
        var attrs = el.attributes;
        var thisAttributeString = "";
        for(var i = attrs.length - 1; i >= 0; i--) {
            thisAttributeString = attrs[i].name + "-" + attrs[i].value;
            el.removeAttribute(thisAttributeString);
        }
    }
}

---

使用jQuery方法removeData（）

jQuery站点状态：

.removeData（）方法允许我们删除 以前使用.data（）设置。当使用密钥名调用时， .removeData（）删除该特定值。打电话时没有 参数，.removeData（）删除所有值

这里的关键部分是：

打电话时没有 参数，.removeData（）删除所有值

---

我认为您必须使用.attr（）函数循环遍历所有属性，如果名称包含特定字符串，则删除。请注意，此代码完全未经测试（插件中的代码片段除外），但它应该能让您了解如何解决此问题。祝你好运如果该属性包含带有附加破折号分隔符的键，如data lorem ipsum=“azbqat”，该怎么办？在上面的示例中，这些属性不会被删除。嗨，它不应该简单地执行

el.removeAttribute（attrs[i].name）吗而不使用此属性字符串

？

function clearDataAttributes(el){
    if (el.hasAttributes()) {
        var attrs = el.attributes;
        var thisAttributeString = "";
        for(var i = attrs.length - 1; i >= 0; i--) {
            thisAttributeString = attrs[i].name + "-" + attrs[i].value;
            el.removeAttribute(thisAttributeString);
        }
    }
}