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>

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.