Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Очистка содержимого и удаление элемента
Для очистки содержимого и удаления элемента применяются следующие методы:
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');
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов