Преобразуем метод jQuery remove() в Vanilla JS

наверх

Все привет!

Сегодня мы посмотрим на 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() для обхода всех элементов.