jQuery предоставляет несколько методов, таких как empty(), remove(), unwrap() и removeAttr() чтобы удалить существующие HTML-элементы (тэги), содержимое тэгов или их атрибуты. Давайте рассмотрим подробнее, как работает каждый из этих методов.
Метод jQuery empty()
Метод jQuery empty() удаляет из DOM все дочерние элементы и текстовое содержимое в выбранных элементах. Он буквально «опустошает» заданный элемент.
Следующий пример удалит все содержимое внутри элементов с классом .container по нажатию кнопки.
<script type="text/javascript"> $(document).ready(function(){ // Удалить все из контейнера $("button").click(function(){ $(".container").empty(); }); }); </script>
Метод jQuery remove()
Метод jQuery remove() удаляет выбранные элементы из DOM, а также все внутри него. В дополнение к самим элементам удаляются все связанные события и данные jQuery, связанные с элементами.
В следующем примере удаляются все элементы <p> с классом .hint из DOM при нажатии кнопки. Вложенные элементы внутри этих абзацев также будут удалены.
<script type="text/javascript"> $(document).ready(function(){ // Удаляет все параграфы с классом hint $("button").click(function(){ $("p.hint").remove(); }); }); </script>
Метод jQuery remove() также может включать селектор в качестве необязательного параметра, который позволяет фильтровать удаляемые элементы. Например, код удаления предыдущего примера можно переписать следующим образом:
<script type="text/javascript"> $(document).ready(function(){ // Удаляет все параграфы с классом hint $("button").click(function(){ $("p").remove(".hint"); }); }); </script>
Метод jQuery unwrap()
Метод jQuery unwrap() удаляет родительские элементы выбранных элементов из DOM. unwrap() это метод, обратный методу wrap(), с которым мы познакомились в предыдущем уроке.
Следующий пример удалит родительский элемент тэга <p> при нажатии кнопки.
<script type="text/javascript"> $(document).ready(function(){ // Удалить редительские элементы параграфа $("button").click(function(){ $("p").unwrap(); }); }); </script>
Метод jQuery removeAttr()
Метод jQuery removeAttr() удаляет атрибут из выбранных элементов.
Приведенный ниже пример удалит атрибут href из элементов <a> при нажатии кнопки.
<script type="text/javascript"> $(document).ready(function(){ // Удаляет атрибут href $("button").click(function(){ $("a").removeAttr("href"); }); }); </script>
Оставить комментарий