Почему так отрабатывает скрипт js?

Question

[Юра Комаров]

Есть небольшой скрипт

$('.js-select-tabs').each((ind, el) => {
	const $text = $(el).find('.js-select-tabs-text');
	const $head = $(el).find('.js-select-tabs-head');

	if (!$text.filter('.is-active').length){
		$text.eq(0).addClass('is-active');
	}

	$head.html($text.filter('.is-active'));
});

Если не выполнять его, то дом дерево имеет вид

Если выполнить, то дом дерево будет иметь вид

Не могу понять, как этот скрипт удалил первый элемент span из списка в select-tabs__dropdown ?
Не вижу явного удаления из дом дерева.
Ссылка на пример ( то что нет других скриптов )
https://codepen.io/Yurajun/pen/pORzxL

Answer 1

[0xD34F]

Не вижу явного удаления из дом дерева.

Неявно тоже ничего не удаляется - элемент перенесён в .js-select-tabs-head, неужели этого не видно? Или вы думаете, что там другой элемент, копия? Это не так - можете получить элемент до вызова html, после, сравнить их, увидите, что это один и тот же элемент.

Хотите, чтобы происходило копирование вместо перемещения... Ну, очевидно же:

$head.html($text.filter('.is-active').clone()).

Comments

[Юра Комаров]

Спасибо, ваш ответ помог понять общую суть работы с дом деревом.

[Сергей delphinpro]

Ну, очевидно же:

Вообще-то довольно неочевидно для новичка, не читавшего доки. Хотя и правильно.