Библиотека jQuery имеет метод, который позволяет удалить атрибуты из элементов DOM. С помощью метода .removeAttr() мы можем удалить любой атрибут HTML элементов, например, id, class, title и другие.
Синтаксис метода .removeAttr()
- removeAttr(name) — Метод удаляет указанный атрибут или атрибуты из всех соответствующих элементов.
Параметры метода .removeAttr()
- name — (Строка) Имя атрибута или разделенный пробелами список имен атрибутов, которые должны быть удалены.
Что возвращает метод .removeAttr()
- Коллекция — После выполнения .removeAttr() он возвращает коллекцию jQuery.
Использование метода .removeAttr()
Давайте посмотрим на реальные примеры использование метода для удаление атрибутов.
Первый пример — у нас в HTML коде есть несколько изображение, которые имеют атрибуты title и alt.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>.removeAttr()</title> </head> <body> <h1>Первый пример</h1> <img src="image1.jpg" alt="image 1" title="my image 1"> <img src="image2.jpg" alt="image 2" title="my image 2"> <img src="image3.jpg" alt="image 3" title="my image 3"> </body> </html>
Цель состоит в том, чтобы удалить атрибуты title и alt из всех изображений на странице. Для выполнения задачи можно написать следующую инструкцию:
$('img').removeAttr('title alt');
Метод removeAttr() использует функцию JavaScript removeAttribute(). Но у него есть преимущество: он вызывается напрямую на каждом элементе в объекте jQuery и позволяет применить цепочку.
У нас может быть задача удалить атрибут HTML элемента по классу. То ест, удалить какой-то атрибут элементов, которые имеют одинаковые классы:
$(".super_class").removeAttr("title");
Также можем удалить атрибуты всех элементов div, которые имеют одинаковые классы:
$("div.super_class").removeAttr("title");
Удаление атрибута не затрагивает соответствующее свойство из DOM-элемента JavaScript, хотя это может привести к изменению его значения. Например, удаление атрибута readonly из элемента поменяет свойство элемента readonly с true на false, но само свойство останется в элементе.
Комментарии