От автора: приветствую вас, друзья. В этой статье мы продолжим знакомиться с методами, позволяющими осуществлять манипуляции с элементами DOM, а именно: добавление, удаление и изменение элементов DOM.
В последней статье, посвященной манипуляции с элементами DOM в jQuery, мы рассмотрим методы, позволяющие удалять элементы из DOM. Напомню, в предыдущих статьях мы изучали методы манипуляции, которые позволяли добавлять или изменять элементы.
Итак, если нам требуется удалить некий элемент, мы можем воспользоваться методом remove или detach. Оба метода дадут одинаковый результат. Давайте посмотрим на пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="container content"> <ul class="list1"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul class="list2"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> |
|
1 2 |
$('.list1').remove(); $('.list2').detach(); |
Если теперь обновить страницу, то мы увидим, что блок content действительно пуст, оба списка были удалены.
Если нам необходимо удалить не сам элемент, а его содержимое, тогда пригодится метод empty. Попробуем очистить содержимое первого списка:
|
1 |
$('.list1').empty(); |
И последняя пара методов, которые мы используем в работе, методы replaceWith и replaceAll. Как следует из названий методов, их назначение — заменять одни элементы страницы другими. Например, заменим содержимое обоих наших списков на новое:
|
1 2 |
$('.list1 li').replaceWith('<li>replaceWith</li>'); $('<li>replaceAll</li>').replaceAll('.list2 li'); |
На этом мы завершим текущую статью и знакомство с jQuery методами манипуляции в целом. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!
