Удаление элементов можно выполнить с помощь следующих четырех методов:
- empty(),
- remove(),
- detach(),
- unwrap().
Рассмотрим каждый из методов подробно. В конце каждого метода предлагается сделать не большое задание для закрепления материала.
Удаление элемента методом empty().
Метод empty() — удаляет все внутренности соответствующему элементу. Элемент после обработки данным методом остается пустым. Рассмотрим на примере
<!DOCTYPE html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(delFunc); function delFunc() { // Удаляем все три параграфа $('.deleteNow').empty(); } </script> </head> <body> <div class="deleteNow"> <p>Текст-1</p> <p>Текст-2</p> <p>Текст-3</p> </div> </body> </html>
После выполнения функции delFunc(); удаляются все три параграфа (<p>Текст-1</p><p>Текст-2</p><p>Текст-3</p>) и получаем следующий код страницы.
<body> <div class="deleteNow"> </div> </body>
Удаление элемента методом remove().
Метод remove() более мощный, он удаляет не только дочерние элементы внутри найденного, но и сам элемент. В этом его главное отличие от метода empty().
<!DOCTYPE html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(delFunc); function delFunc() { // Удаляем все три параграфа $('.deleteNow').remove(); } </script> </head> <body> <div class="deleteNow"> <p>Текст-1</p> <p>Текст-2</p> <p>Текст-3</p> </div> </body> </html>
При выполнении функции delFunc(); получим следующий результат:
<body> </body>
Удаление элемента методом detach().
В jQuery удаление элемента производиться методом detach() в тех случаях, когда удаляемый элемент планируется восстановить. При использовании этого метода также удаляются и могут быть полностью восстановлены все события привязанные к удаляемому элементу.
Метод remove() удаляет события безвозвратно.
<!DOCTYPE html> <head> <style> p.alarm { background-color: orange; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(delFunc); function delFunc() { // Устанавливаем событие click параграфу testDiv // Добавляем класс alarm при его отсутствии и удаляем класс alarm, // если он уже есть у элемента $("#testDiv>p").click( function() {$(this).toggleClass("alarm");} ); // Удаляем и восстанавливаем параграф #testDiv var test = $('#testDiv>p').detach(); test.appendTo('#testDiv'); } </script> </head> <body> <div id="testDiv"> <p>Text-1</p> </div> </body>
В пример мы сначала методом .detach(); удалили элемент и событие click, к нему привязанное, а методом appendTo(); восстановили. Проведите эксперимент — замените .detach() на remove(). Можно ли будет по клику на параграф менять ему класс?
Удаление элемента методом unwrap().
Метод unwrap(); используется для удаления родительского элемента. Wrap — переводиться как обертка, то есть удаляем элемент, который обертывает наш выбранный элемент. На примере все сразу же понятно.
<!DOCTYPE html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(delFunc); function delFunc() { // Удаляем элемент #mywrap, но сохраняем его содержимое $('#mytext').unwrap(); } </script> </head> <body> <div id="mywrap"> <p id="mytext">Text-0</p> <p>Text-1</p> <p>Text-2</p> <p>Text-3</p> </div> </body> </html>
Результирующий код страницы таков:
<body> <p id="mytext">Text-0</p> <p>Text-1</p> <p>Text-2</p> <p>Text-3</p> </body>
А теперь не большой тест.
Спасибо за прочтение статьи! Надеюсь, где-то пригодится!
Добавить комментарий