Все привет!
Сегодня мы посмотрим на JQuery метод remove() и попробуем его преобразовать к обычному JS.
jQuery remove() метод
jQuery’s remove() удаляет все элементы в коллекции из DOM дерева.
<p> <button id="save">Save</button> <button id="edit">Edit</button> <button id="cancel">Cancel</button> </p>
Вы можете удалить кнопку с id #edit следующим образом:
$('#edit').remove();
Ваш HTML после этого будет выглядеть так:
<p> <button id="save">Save</button> <button id="cancel">Cancel</button> </p>
Или вы можете удалить все кнопки следующим образом:
$('button').remove();
Ваш HTML будет выглядеть так:
<p></p>
Как удалить элементы с помощью Vanilla JS?
Сегодня JS метод Element.remove() предоставляет такой же функционал, как и JQuery remove().
Чтобы использовать этот метод нужно получить элемент (используя querySelector() или другие селекторы), затем вызвать метод remove().
Удалить кнопку с id #edit можно следующим образом:
document.querySelector('#edit').remove();
Ваш HTML будет выглядеть так:
<p> <button id="save">Save</button> <button id="cancel">Cancel</button> </p>
Но вы не сможете с помощью JS remove() удалить коллекцию элементов. Для этого вам нужно пройти по всем элементам с помощью each и удалить каждый элемент отдельно.
Например:
Array.from(document.querySelectorAll('button')).forEach(function (button) { button.remove(); });
Здесь используется querySelectorAll(), чтобы получить все подходящие элементы. Затем мы конвертируем коллекцию в массив с помощью метода Array.from().
Это позволяет нам использовать Array.forEach() для обхода всех элементов.
Поддержка браузерами
Remove() метод поддерживается большинством браузеров, но требует полифил для IE. Array.from() так же требует полифил.
Оригинал статьи: ссылка