JS метод Element.removeAttribute()

Загальний опис

Element.removeAttribute() - це метод JavaScript, який дозволяє видалити певний атрибут з елемента DOM. Цей метод є корисним інструментом для динамічного управління атрибутами елементів, що може бути необхідним для різних сценаріїв, таких як зміна стилів, маніпуляції з даними або реалізація певної логіки на основі атрибутів.

Використання removeAttribute() є досить простим. Припустимо, ми маємо елемент div з атрибутом data-role="modal". Щоб видалити цей атрибут, можна виконати наступний код:

const modalElement = document.querySelector('div[data-role="modal"]');
modalElement.removeAttribute('data-role');

Після виконання цього коду атрибут data-role буде повністю видалений з елемента div. Якщо ви спробуєте отримати значення цього атрибута після видалення, ви отримаєте null або undefined, залежно від методу, який використовується.

Метод removeAttribute() може бути використаний для видалення будь-якого атрибута з елемента, включаючи стандартні атрибути HTML, такі як id, class, src тощо. Наприклад, щоб видалити атрибут class з елемента a, ви можете виконати:

const linkElement = document.querySelector('a');
linkElement.removeAttribute('class');

Це призведе до видалення всіх класів CSS, застосованих до елемента a.

Іноді може знадобитися видалити атрибут на основі певної умови або дії користувача. У таких випадках removeAttribute() може бути використаний у поєднанні з іншими методами JavaScript. Наприклад, ви можете видалити атрибут disabled з елемента input, коли користувач натискає кнопку:

const submitButton = document.getElementById('submit');
const inputField = document.getElementById('input');

submitButton.addEventListener('click', () => {
  inputField.removeAttribute('disabled');
});

У цьому прикладі, коли користувач натискає кнопку submit, атрибут disabled видаляється з елемента input, дозволяючи користувачеві вводити дані.

Важливо пам'ятати, що після видалення атрибута всі стилі, поведінка або дані, пов'язані з цим атрибутом, також будуть видалені. Тому слід обережно використовувати removeAttribute() та переконатися, що це не призведе до небажаних наслідків для функціональності вашого веб-додатку.

Загалом, Element.removeAttribute() є потужним інструментом для динамічного управління атрибутами елементів DOM, що дозволяє адаптувати поведінку та зовнішній вигляд веб-сторінки відповідно до вимог вашого додатку.

Синтаксис

removeAttribute(attrName)

Параметри

attrName

Рядок, який вказує ім'я атрибута для видалення з елемента. Якщо зазначений атрибут не існує, removeAttribute() повертається без генерації помилки.

Return

none

Повертає undefined.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Знаходимо елемент input
const inputElement = document.querySelector('#input-field');

// Знаходимо кнопку
const enableButton = document.querySelector('#enable-btn');

// Додаємо обробник події на кнопку
enableButton.addEventListener('click', () => {
  // Видаляємо атрибут disabled з елемента input
  inputElement.removeAttribute('disabled');
});

<ul id="product-list">
  <li data-product-id="1">Товар 1</li>
  <li data-product-id="2">Товар 2</li>
  <li data-product-id="3">Товар 3</li>
</ul>
<button id="remove-btn">Видалити</button>

<script>
// Знаходимо список товарів
const productList = document.querySelector('#product-list');

// Знаходимо кнопку "Видалити"
const removeButton = document.querySelector('#remove-btn');

// Додаємо обробник події на кнопку
removeButton.addEventListener('click', () => {
  // Знаходимо всі елементи списку
  const listItems = productList.querySelectorAll('li');

  // Ітеруємо по елементах списку та видаляємо атрибут data-product-id
  listItems.forEach(item => {
    item.removeAttribute('data-product-id');
  });
});
</script>