15

所以 jquery api 说如下：

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

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

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

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

更多细节：

  1. 起点是我有多个（比方说.. 60）不同的数据属性，我想删除所有这些属性。

  2. 首选方法是仅定位那些包含单词的数据属性lorem。在这种情况下lorem，始终是第一个词。（或者第二个，如果你算的话data-）

  3. 我也想保持所有其他属性不变

4

7 回答 7

14 
// Fetch an array of all the data
var data = $("a").data(),
    i;
// Fetch all the key-names
var keys = $.map(data , function(value, key) { return key; });
// Loop through the keys, remove the attribute if the key contains "lorem".
for(i = 0; i < keys.length; i++) {
    if (keys[i].indexOf('lorem') != -1) {
        $("a").removeAttr("data-" + keys[i]);
    }
}

在这里小提琴：http: //jsfiddle.net/Gpqh5/

于 2012-01-23T08:45:37.997 回答
5

在我的 jQuery 占位符插件中，我使用以下内容来获取给定元素的所有属性：

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 对象。

您可以轻松地对此进行调整，以仅获取data-*属性名称：

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/);
于 2012-01-23T08:35:24.650 回答
1

下面的 Vanilla JS 清除所有数据属性。如果您想添加一些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);
        }
    }
}
于 2017-09-09T22:41:16.780 回答
0

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

我遇到的问题是 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);
        });
    });
};

请注意，它使用下划线，但我相信您可以将 _.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-");
于 2016-04-07T22:10:25.410 回答
0

您可以循环特定元素的所有数据属性并过滤子字符串的索引。

REMOVE_ATTR 我使用了.removeAttr() 方法，但您可以使用.removeData()方法，具体取决于数据属性的创建方式。替换或组合你认为合适的。

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

SET NULL 您还可以选择将数据属性设置为空，具体取决于您的业务逻辑。

$.each($('div').data(), function (i) {
    var dataName = i, criteria = "lorem";
    if (dataName.indexOf(criteria) >= 0) { 
       $('div').data(dataName, "");
    }
});
于 2016-08-13T21:17:00.037 回答
0

使用 jQuery 方法removeData()

jQuery 网站状态：

.removeData() 方法允许我们删除之前使用 .data() 设置的值。当使用键名调用时，.removeData() 会删除该特定值。当不带参数调用时， .removeData() 删除所有值。

这里的关键部分是：

当不带参数调用时， .removeData() 删除所有值。

https://api.jquery.com/removeData/

于 2019-03-16T13:00:55.567 回答
-3

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

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

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

JsFiddle Demo（点击运行后一定要查看html源代码）

于 2012-01-23T08:44:02.360 回答