Удалите несколько атрибутов данных html5 с помощью jquery

Question

Итак, jquery api говорит следующее:

Удаление данных из внутреннего кэша .data () jQuery не влияет на какие-либо атрибуты данных HTML5 в документе;используйте .removeAttr () для их удаления.

У меня нет проблем с удалением одного атрибута данных.

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

---

Вопрос в том, как удалить несколькоатрибуты данных?

Подробнее:

1. Отправной точкой является то, что у меня есть несколько (скажем .. 60) различных атрибутов данныхи я хочу удалить их все.

2. Предпочтительным способом будет нацеливание только на те атрибуты данных, которые содержат слово lorem.В этом случае lorem всегда первое слово.(или второе, если вы считаете data-)

3. Также я хотел бы оставить все остальные атрибуты без изменений

Answer 1

// 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/

Answer 2

В моем плагине-заполнителе 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/);

Answer 3

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

Answer 4

используйте метод jQuery removeData ()

Сайт jQuery сообщает:

Метод .removeData () позволяет нам удалять значения, которые были предварительно установлен с помощью .data (). Когда вызывается с именем ключа, .removeData () удаляет это конкретное значение. Когда звонил без Аргументы .removeData () удаляет все значения.

Ключевая часть здесь:

При вызове без Аргументы .removeData () удаляет все значения.

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

Answer 5

Вы можете зациклить все атрибуты данных конкретного элемента и отфильтровать индекс подстроки.

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 При желании вы также можете установить нулевой атрибут data-attribute в зависимости от вашей бизнес-логики.

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

Answer 6

Я также выложу ответ, так как мне потребовалось некоторое время, чтобы сделать рабочую версию из поста Матиаса.

Проблемы, с которыми я столкнулся, заключались в том, что 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-");

Answer 7

К сожалению, в jQuery невозможно выбрать имена атрибутов, которые начинаются с заданного значения (для значений атрибутов это возможно).

Самое простое решение, которое я придумал:

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

JsFiddle Demo (Обязательно посмотрите исходный код html после нажатия кнопки run)