Как удалить несколько атрибутов из узла?

Question

У меня есть этот элемент изображения:

<img class="cat" src="img/tom.png" alt="Cat">

Я хочу удалить оба атрибута src и alt одновременно.
Я ожидал removeAttribute() метод дляпринять несколько аргументов, но это не так.

Есть ли другой способ сделать это, кроме этого повторяющегося кода:

image.removeAttribute('src');
image.removeAttribute('alt');

Answer 1

Вот как я это сделал -

(() => {
        'use strict';
        let token = 'src|alt';
        if (token === '' || token === '{{1}}') { return; }
        let tokens = token.split(/\s*\|\s*/);
        let selector = 'img';
        if (selector === '' || selector === 'img') {
            selector = `[${tokens.join('],[')}]`;
        }
        let rmattr = () => {
            let elements = document.querySelectorAll(selector);
            for ( let element of elements ) {
                for (let attr of tokens) {
                        element.removeAttribute(attr);
                }   
            }      
        };
        if (document.readyState === 'loading' || document.readyState === 'interactive' || document.readyState === 'complete') {
                 rmattr();
        } else {
                 addEventListener('load', rmattr);
        }
})();

Answer 2

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

function removeAttributes(element, ...attrs) {
  attrs.forEach(attr => element.removeAttribute(attr))
}

removeAttributes(document.querySelector('img'), 'src', 'alt')

<img class="cat" src="img/tom.png" alt="Cat">

Если вы хотите вызвать его для элемента DOM, вы можете расширить прототип Element.

Element.prototype.removeAttributes = function(...attrs) {
  attrs.forEach(attr => this.removeAttribute(attr))
}

document.querySelector('img').removeAttributes('src', 'alt')

<img class="cat" src="img/tom.png" alt="Cat">

Answer 3

Не уверен, что это делает его лучше, но вы, вероятно, могли бы сделать что-то вроде этого:

['alt', 'src'].forEach(attribute => image.removeAttribute(attribute));

или создать общую функцию удаления атрибутов:

const removeAttributes = (element, ...attributes) => attributes.forEach(attribute => element.removeAttribute(attribute));

, которую вы бы назвали какэто:

removeAttributes(image, 'alt', 'src');

Answer 4

Решение Jquery: атрибуты, разделенные пробелами, такие как image.removeAttr('src alt'), должны работать.

Редактировать: используя чистый Javascript, вы можете перебрать массив, используя removeAttribute: