Очистка содержимого и удаление элемента

Для очистки содержимого и удаления элемента применяются следующие методы:

  • empty() — удаляет содержимое текущего элемента, включая обработчики событий и данные. Пример:
<div id="div1"><b>Этот текст будет удален</b></div>
<input type="button" value="Очистить" 
   onclick="$('#div1').empty();">
<input type="button" value="Вставить" 
   onclick="$('#div1').html('<b>Новый текст</b>');">

Как видно из примера, после удаления содержимого элемента с идентификатором div1 сам элемент все еще остается доступным для манипуляций;

  • remove([<Селектор>]) — полностью удаляет элементы из объектной модели документа, включая обработчики событий и данные. Пример:
<div id="div1">
   <b>Этот элемент будет полностью удален</b>
</div>
<input type="button" value="Удалить" 
   onclick="$('#div1').remove(); this.disabled=true;">
<input type="button" value="Количество элементов" 
   onclick="alert($('#div1').length);">

Данный пример демонстрирует отсутствие элемента после щелчка на кнопке Удалить. Щелкнув на кнопке Количество элементов в первый раз, мы получим число 1, а если щелкнуть на ней после удаления элемента, то получим число 0.

Если коллекция состоит более чем из одного элемента, то будут удалены все элементы. Метод remove() позволяет задать дополнительное условие, которому должны соответствовать удаляемые элементы. В качестве примера удалим все ссылки с расширением php:

$('a').remove('[href$=".php"]');
  • detach([<Селектор>]) — удаляет элементы из объектной модели документа и возвращает их в виде коллекции jQuery. В отличие от метода remove() не удаляет связанные с элементами данные, что позволяет позже вставить элементы обратно в документ. Сохраним данные в элементе с идентификатором p1, потом удалим элемент, а затем вставим его в конец элемента с идентификатором div1. Получим данные и выведем их в консоль:
<p id="p1">Абзац</p>
<div id="div1"></div>
$.data($('#p1').get(0), 'myData', 'Строка с данными');
var p = $('#p1').detach();
$('#div1').append(p);
console.log( $.data( $('#p1').get(0), 'myData') );
// Строка с данными
  • unwrap([<Селектор>]) — удаляет родительский элемент, оставляя дочерние элементы на месте. Удалим родительский элемент для абзаца с идентификатором p1:
<div>
   <p id="p1">Абзац 1</p>
   <p>Абзац 2</p>
</div>
$('#p1').unwrap();

Результат:

   <p id="p1">Абзац 1</p>
   <p>Абзац 2</p>

Метод unwrap() позволяет задать дополнительное условие в виде селектора, которому должен соответствовать удаляемый родительский элемент:

$('#p1').unwrap('div');

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов