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