18.1 C
Москва
01.09.2026

37

Как удалить дата атрибут через js

Метод removeAttribute

Метод removeAttribute удаляет заданный атрибут у какого-либо тега.

Синтаксис

элемент.removeAttribute(имя атрибута);

Пример

Давайте для элемента удалим атрибут value :

let elem = document.querySelector(‘#elem’); elem.removeAttribute(‘value’);

HTML код станет выглядеть так (исчезнет атрибут value):

Смотрите также

  • метод getAttribute ,
    который получает атрибуты
  • метод setAttribute ,
    который записывает атрибуты
  • метод hasAttribute ,
    который проверяет атрибуты

.removeAttr()

Удаляет указанный атрибут у каждого выбранного элемента.

version added: 1.0 .removeAttr( attributeName )

Метод .removeAttr() использует JavaScript функцию removeAttribute(), но может быть вызвана непосредственно от jQuery объекта и действует кроссбраузерно.

$element.prop("onclick", null); console.log("onclick property: ", $element[0].onclick);

Пример

Клик по кнопке меняет значение атрибута title рядом стоящего поля.

Шпаргалка jQuery:

  • Ajax
    • Global Ajax Event Handlers
      • .ajaxComplete()
        • :button
        • :checkbox
        • :checked
        • :disabled
        • :enabled
        • :file
        • :focus
        • :image
        • .serializeArray()
        • .serialize()
        • jQuery.param()
        • jQuery.ajax()
        • jQuery.ajaxSetup()
        • jQuery.ajaxPrefilter()
        • jQuery.ajaxTransport()
        • jQuery.get()
        • jQuery.post()
        • .load()
        • jQuery.getJSON()
        • jQuery.getScript()
        • .serialize()
        • .serializeArray()
        • jQuery.param()
        • .val()
        • .blur()
        • .change()
        • .focus()
        • .addClass()
        • .hasClass()
        • .removeClass()
        • .toggleClass()
        • .html()
        • .removeAttr()
        • .prop()
        • .removeProp()
        • .attr()
        • .val()
        • Collection Manipulation
          • jQuery.param()
          • .data()
          • .removeData()
          • Class Attribute
            • .addClass()
            • .hasClass()
            • .removeClass()
            • .toggleClass()
            • .clone()
            • .wrap()
            • .wrapAll()
            • .wrapInner()
            • .unwrap()
            • .append()
            • .appendTo()
            • .html()
            • .text()
            • .prepend()
            • .prependTo()
            • .after()
            • .before()
            • .insertAfter()
            • .insertBefore()
            • .unwrap()
            • .remove()
            • .empty()
            • .detach()
            • .replaceAll()
            • .replaceWith()
            • .removeProp()
            • .removeAttr()
            • .prop()
            • .attr()
            • .val()
            • .css()
            • .height()
            • .width()
            • .innerHeight()
            • .innerWidth()
            • .outerHeight()
            • .outerWidth()
            • .offset()
            • .position()
            • .scrollLeft()
            • .scrollTop()
            • .height()
            • .width()
            • .innerHeight()
            • .innerWidth()
            • .outerHeight()
            • .outerWidth()
            • jQuery.holdReady()
            • jQuery()
            • jQuery.noConflict()
            • jQuery.when()
            • .addClass()
            • .hasClass()
            • .removeClass()
            • .toggleClass()
            • .css()
            • .height()
            • .width()
            • .innerHeight()
            • .innerWidth()
            • .outerHeight()
            • .outerWidth()
            • .offset()
            • .position()
            • .scrollLeft()
            • .scrollTop()
            • .clearQueue()
            • .dequeue()
            • .data()
            • jQuery.hasData()
            • jQuery.removeData()
            • jQuery.dequeue()
            • .removeData()
            • jQuery.data()
            • .queue()
            • Custom
              • .clearQueue()
              • .dequeue()
              • .queue()
              • .clearQueue()
              • .dequeue()
              • jQuery.dequeue()
              • jQuery.data()
              • .queue()
              • jQuery.proxy()
              • callbacks.add()
              • callbacks.disable()
              • callbacks.disabled()
              • callbacks.empty()
              • callbacks.fire()
              • callbacks.fired()
              • callbacks.fireWith()
              • callbacks.has()
              • callbacks.lock()
              • callbacks.locked()
              • callbacks.remove()
              • jQuery.Callbacks()
              • deferred.always()
              • deferred.done()
              • deferred.fail()
              • deferred.notify()
              • deferred.notifyWith()
              • deferred.progress()
              • deferred.promise()
              • deferred.reject()
              • deferred.rejectWith()
              • deferred.resolve()
              • deferred.resolveWith()
              • deferred.state()
              • deferred.then()
              • Basics
                • Универсальный селектор (“*”)
                • jQuery( «.class» )
                • Селектор элементов (“element”)
                • Селектор ID (“#id”)
                • Множественный (“selector1, selector2, selectorN”)
                • Селектор по префиксу [name|=”value”]
                • Селектор содержащий значение [name*=»value»]
                • Селектор, содержащий слово [name~=»value»]
                • Селектор по атрибуту, на конце которого [name$=»value»]
                • Селектор по равенству [name=»value»]
                • Селектор по неравенству [name!=»value»]
                • Значение атрибута начинается с [name^=»value»]
                • Селектор по наличию атрибута [name]
                • Множественный селектор по атрибуту [name=»value»][name2=»value2″]
                • :animated Selector
                • :eq()
                • :even
                • :first
                • :focus
                • :gt()
                • :header
                • :lang()
                • :last
                • :lt()
                • :first-child
                • :first-of-type
                • :last-child
                • :last-of-type
                • :nth-child()
                • :nth-last-child()
                • :nth-last-of-type()
                • :nth-of-type()
                • :only-child
                • :only-of-type
                • :contains()
                • :empty
                • :has()
                • :parent
                • Browser Events
                  • .resize()
                  • .scroll()
                  • .ready()
                  • .bind()
                  • .delegate()
                  • jQuery.proxy()
                  • .off()
                  • .one()
                  • .trigger()
                  • .triggerHandler()
                  • .unbind()
                  • .undelegate()
                  • event.currentTarget
                  • event.data
                  • event.delegateTarget
                  • event.isDefaultPrevented()
                  • event.isImmediatePropagationStopped()
                  • event.isPropagationStopped()
                  • event.metaKey
                  • event.namespace
                  • event.pageX
                  • event.pageY
                  • event.preventDefault()
                  • event.relatedTarget
                  • event.result
                  • event.stopImmediatePropagation()
                  • event.stopPropagation()
                  • event.target
                  • event.timeStamp
                  • event.type
                  • event.which
                  • .blur()
                  • .change()
                  • .focus()
                  • .focusin()

                  Как удалить дата атрибут через js

                  Тег внутри которого будем удалять атрибут «data» — пусть это будет div, чтобы обратиться к тегу вам нужен идентификатор — используем id:

                  Это тег где будем удалять атрибут data

                  Чтобы пример был живым, будем удалять атрибут по нажатию на кнопку — button, таже чтобы обратиться к тегу используем id в кнопке.

                  + Добавлю стилей к атрибуту data, чтобы было видно удаление атрибута data.

                  С html разобрались, теперь давайте перейдем к:
                  javascript

                  Соберем весь код:

                  Код удаления атрибута data:

                  Это тег где будем удалять атрибут data

                  .dataset

                  Простейший способ хранить данные в HTML и читать их из JavaScript.

                  Время чтения: 5 мин

                  Открыть/закрыть навигацию по статье

                  1. Кратко
                  2. Как пишется
                    1. Использование camelCase и kebab-case
                    2. Удаление дата-атрибута
                    1. Егор Огарков советует

                    Обновлено 28 ноября 2022

                    Кратко

                    Скопировать ссылку «Кратко» Скопировано

                    Свойство dataset позволяет считывать или устанавливать любые дата-атрибуты на HTML-элементе.

                    Дата-атрибут — это пользовательский атрибут на элементе, название которого начинается с data — , например data — testid . Дата атрибуты используются, чтобы хранить значения на элементах в HTML.

                    Как пишется

                    Скопировать ссылку «Как пишется» Скопировано

                    Обращение к свойству dataset вернёт объект со всеми дата-атрибутами, которые есть на элементе. Названиями полей в объекте будут имена дата-атрибутов после префикса data — . Например, если атрибут называется data — columns , то поле в объекте для этого атрибута будет называться columns .

                     const items = document.querySelectorAll('li') const firstItem = items[0] console.log(firstItem.dataset)// const items = document.querySelectorAll('li') const firstItem = items[0] console.log(firstItem.dataset) //

                    Если дата-атрибутов на элементе нет, то вернётся пустой объект:

                     const heading = document.querySelector('h1') console.log(heading.dataset)// <> const heading = document.querySelector('h1') console.log(heading.dataset) // <>

                    Чтобы добавить дата-атрибут к элементу, нужно добавить новое поле в объект dataset . Название поля так же должно быть без префикса data — , браузер автоматически подставит его. В значениях атрибутов в HTML могут быть только строки, потому любое значение будет автоматически приведено к строке.

                    Возьмём тот же HTML из примера выше и добавим дата-атрибуты ко второму элементу:

                     const items = document.querySelectorAll('li') const secondItem = items[1] secondItem.dataset.side = 'evil'secondItem.dataset.age = 46secondItem.dataset.lightsaber = const items = document.querySelectorAll('li') const secondItem = items[1] secondItem.dataset.side = 'evil' secondItem.dataset.age = 46 secondItem.dataset.lightsaber =  color: 'red' >

                    В результате получим такой элемент:

                      data-id="9434" data-episode="4" data-side="evil" data-age="46" data-lightsaber="[object Object]"> Дарт Вейдер  li data-id="9434" data-episode="4" data-side="evil" data-age="46" data-lightsaber="[object Object]"> Дарт Вейдер li>

                    Все не строковые значения установленные в dataset будут приводиться к строке. Поэтому объект превращается в [object Object ] , а число 46 превращается в строку «46» .

                    Если в dataset добавить поле с пустым значением, то в HTML будет создан дата-атрибут без значения.

                    Использование camelCase и kebab-case

                    Скопировать ссылку «Использование camelCase и kebab-case» Скопировано

                    В dataset необходимо присваивать поля, название которых записывается в одно слово. Потому для составных имён используется только camel Case нотация. При попытке присвоить название в kebab — case будет выброшена ошибка.

                     const body = document.querySelector('body') body.dataset['dark-theme'] = true // Uncaught DOMException: Failed to set// a named property on 'DOMStringMap':// 'dark-theme' is not a valid property name. const body = document.querySelector('body') body.dataset['dark-theme'] = true // Uncaught DOMException: Failed to set // a named property on 'DOMStringMap': // 'dark-theme' is not a valid property name.

                    Дата-атрибуты, записанные в dataset с помощью camel Case , в HTML будут иметь названия в kebab — case . Браузер преобразует camel Case в kebab — case :

                     const item = document.querySelector('li') item.dataset.yearsOfExperience = 2item.dataset.candidateRole = 'junior' const item = document.querySelector('li') item.dataset.yearsOfExperience = 2 item.dataset.candidateRole = 'junior'

                    После выполнения кода выше получится следующий HTML:

                    Преобразование названий работает и в обратную сторону – дата-атрибут на HTML-элементе, записанный в kebab — case , будет превращён в dataset в camel Case .

                     const item = document.querySelector('li') console.log(item.dataset)// const item = document.querySelector('li') console.log(item.dataset) //

                    Удаление дата-атрибута

                    Скопировать ссылку «Удаление дата-атрибута» Скопировано

                    Удалить дата-атрибут можно только с помощью оператора delete . Если попытаться присвоить к полю значение undefined или null , то браузер просто присвоит атрибуту строку ‘undefined’ или ‘null’ .

                    Возьмём следующий HTML:

                     Любое содержимое div data-testid="test">Любое содержимоеdiv>

                    При установке undefined в значение дата-атрибута, он не удалится с элемента.

                     const element = document.querySelector('div') element.dataset.testid = undefined const element = document.querySelector('div') element.dataset.testid = undefined

                    В результате получится следующий HTML:

                     Любое содержимое div data-testid="undefined">Любое содержимоеdiv>

                    Если использовать оператор delete , то получим элемент без дата-атрибута.

                     delete element.dataset.testid delete element.dataset.testid      
                     
                    Любое содержимое
                     div>Любое содержимоеdiv>

                    Свойство dataset защищено от перезаписи. Это значит что попытка присвоить в dataset новое значение будет проигнорирована.

                     const element = document.querySelector('div') // Ничего не произойдёт, дата-атрибуты на элементах тоже не изменятсяelement.dataset = <>element.dataset = 'string' const element = document.querySelector('div') // Ничего не произойдёт, дата-атрибуты на элементах тоже не изменятся element.dataset = > element.dataset = 'string'

                    Как понять

                    Скопировать ссылку «Как понять» Скопировано

                    Дата-атрибуты появились в HTML5 и добавили возможность разработчикам добавлять свои собственные атрибуты к элементам. Причин для использования таких атрибутов можно придумать множество, чаще всего в дата-атрибутах хранят нужные значения, которые используют в CSS или JavaScript.

                    Дата-атрибуты были созданы специально для того, чтобы хранить и работать с данными прямо в HTML. Отсюда и префикс data, что в переводе значит данные. Например, с помощью дата-атрибутов можно хранить значение выбранное в селекте прямо на элементе.

                    Хранение данных на HTML-элементах так же полезно для инициализации виджетов в JavaScript. Они могут находить нужные элементы используя дата-атрибут как селектор, и читать данные из атрибута. Например, в многостраничных приложениях HTML генерируется на сервере и готовая страница отправляется в ответ на запрос. Во время генерации в HTML можно подставить дата-атрибуты с данными с сервера, и таким образом пробросить их в JavaScript.

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

                    Дата-атрибутов на элементе может быть сколько угодно, потому удобно располагать отдельные кусочки данных в свой атрибут. Такого точно нельзя достичь, используя только идентификатор.

                    Браузер даёт возможность управлять дата-атрибутами через специальное API dataset .

                    На практике

                    Скопировать ссылку «На практике» Скопировано

                    Егор Огарков советует

                    Скопировать ссылку «Егор Огарков советует» Скопировано

                    �� Дата-атрибут можно использовать для применения стилей. Элементы можно выделять CSS-селектора по атрибуту:

                     [data-id]  /* Селектор для всех элементов с data-id */> [data-id="123"]  /* Селектор только для элементов с data-id="123" */> [data-id]  /* Селектор для всех элементов с data-id */ > [data-id="123"]  /* Селектор только для элементов с data-id="123" */ >

                    Найти элемент с data — id = «123» :

                     const element = document.querySelector('[data-id="123"]') const element = document.querySelector('[data-id="123"]')

                    �� Некоторые фреймворки во время компиляции самостоятельно генерируют дата-атрибуты и присваивают их к элементам, чтобы делать изоляцию CSS.

                    �� Дата-атрибуты широко используются в автоматизированном тестировании. Для этого на необходимых элементах расставляют дата-атрибуты и тест обращается к ним. В документациях к различным библиотекам для тестирования часто можно встретить атрибут data — testid .

                    Читать:
                    Как получить рут права на honor 7a

Похожие записи

Как делать скриншот на ноутбуке тошиба

admin

Когда вышел samsung s10

admin

Как устроен камаз

admin