removeData()

Категории: Ядро > Доступ к объектам jQuery

removeData( [ имя ] )

Возвращает:jQuery

Описание: Удаляет данные с соответствующим именем из элемента.

Аргументы

.removeData( [имя] )

Добавлена в версию: 1.2.3

имя

Строка

Имя элемента, в котором нужно удалить данные.

.removeData( [список] )

Добавлена в версию: 1.7

список

Строка, Массив

Массив или строка разделенная пробелами имен элементов для удаления.

Метод .removeData() позволяет нам удалить данные, которые были определенны до этого с помощью .data(). Когда вызывается с именем аргумента, .removeData() удаляет определенное значение; когда вызывается без аргумента, удаляются все значения. Удаление данных из внутреннеего кэш jQuery .data() не влияет на любые атрибуты HTML5 data- в документе; для их удаления используйте .removeAttr().

При использовании .removeData("name"), jQuery будет пытаться найти атрибут data- на элемент, если нет свойства с таким именем во внутреннем кэше данных. Чтобы избежать повторного запроса атрибута data-, установить имя в значение либо null либо undefined (например .data("name", undefined)), а не с помощью .removeData().

Начиная с jQuery 1.7, при вызове с массивом ключей или строки с разделенными пробелами ключами, .removeData() удаляет значение каждого ключа в этом массиве или строке.

Начиная с jQuery 1.4.3, при вызове .removeData() приведет к удалению значения свойства, возвращению к значению атрибута одного и того же имени в DOM, а не установлению его в undefined.

Пример

Прикрепляет данные к двум элементам, а затем удаляет в одном из них.

    $("span:eq(0)").text("" + $("div").data("test1"));
    $("div").data("test1", "VALUE-1");
    $("div").data("test2", "VALUE-2");
    $("span:eq(1)").text("" + $("div").data("test1"));
    $("div").removeData("test1");
    $("span:eq(2)").text("" + $("div").data("test1"));
    $("span:eq(3)").text("" + $("div").data("test2"));

Результат выполнения кода выше:

Попробуйте сами

Пример - Полный код:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("span:eq(0)").text("" + $("div").data("test1"));
    $("div").data("test1", "VALUE-1");
    $("div").data("test2", "VALUE-2");
    $("span:eq(1)").text("" + $("div").data("test1"));
    $("div").removeData("test1");
    $("span:eq(2)").text("" + $("div").data("test1"));
    $("span:eq(3)").text("" + $("div").data("test2"));
  });
  </script>
  <style>
  div { margin:2px; color:blue; }
  span { color:red; }
  </style>
</head>
<body>
  <div>value1 before creation: <span></span></div>
  <div>value1 after creation: <span></span></div>
  <div>value1 after removal: <span></span></div>
  <div>value2 after removal: <span></span></div>
</body>
</html>