Удаление нескольких html5 данных-атрибутов с JQuery

Question

Так JQuery апи говорит следующее:

Удаление данных из внутренней .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]); 
    } 
} 

Fiddle здесь: http://jsfiddle.net/Gpqh5/

Answer 2

В my jQuery placeholder plugin, я использую следующий, чтобы получить все атрибуты для данного элемента :

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

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

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

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

JsFiddle Demo (Убедитесь в том, чтобы посмотреть исходный код после того, как вы нажали прогон)

Answer 4

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

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 Вы также можете дополнительно задать данные-атрибут NULL в зависимости от бизнес-логики.

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

Answer 6

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