Как удалить атрибут HTML элемента с помощью метода .removeAttr()

Как удалить атрибут HTML элемента с помощью метода .removeAttr()
5 (100%) 4 votes

Библиотека 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, но само свойство останется в элементе.


Об авторе

Занимаюсь программированием уже более 7 лет. Часто использую JavaScript (Node.js) и Python. Хобби - Квантовая механика и нейронные сети.

Комментарии