@eugene159

Можно ли в JQuery (или чистом JS) создать переменную, которая будет соответствовать DOM? То есть, если элемента больше нет в DOM, то и length равен 0?

Приведу код, чтобы было понятнее.

<div class="wrapper">
  <div class="elem-1">elem-1</div>
  <div class="elem-2">elem-2</div>
</div>

$(function() {
	let $elem_1 = $('.elem-2').prev();
  $('.elem-1').remove();
  
  // Выдает 1, а должно 0.
  console.log($elem_1.length);
});
  • Вопрос задан
  • 182 просмотра
Пригласить эксперта
Ответы на вопрос 2
iFunction
@iFunction
PHP
$.contains(document, $elem_1)
Ответ написан
Комментировать
erge
@erge
Примус починяю
// Выдает 1, а должно 0.


Не должно!
Потому что .remove()
Remove the set of matched elements from the DOM.
т.е. удаляет набор соответствующих элементов из DOM

что успешно и выполняется.
но т.к. вы сделали ссылку на этот элемент
let $elem_1 = $('.elem-2').prev();
он продолжает существовать и будет удален когда исчезнет последняя ссылка на него.

нужно удалить ссылку на объект, например так:
$elem_1 = null;

т.е. при удалении из DOM, удалять так же и ссылку из переменной:
$('.elem-1').remove();
$elem_1 = null;


так же, если вы объявите саму переменную как свойство какого либо объекта, то ее можно удалить.
если за функцией то достаточно это сделать без var или let/const, тогда эта переменная будет свойством window
либо в функции как window.$elem_1
см. delete

т.е. в коде вы должны удалять не только из DOM методом .remove(), но и само свойство ("переменную").

$(function() {
  window.$elem_1 = $('.elem-2').prev();

  delete window.$elem_1;
  $('.elem-1').remove();

  console.log(window.$elem_1.length);
  // TypeError: window.$elem_1 is undefined
});


PS: можно создать объект с соответствующими свойствами и методами и пользоваться методами этого объекта.

например как-то так:

$obj = {
	$elem: null,
  set: function (el) {
  	this.$elem = el;
  },
  del: function() {
  	$(this.$elem).remove();
  	delete this.$elem;
  },
  isExists: function() {
  	return !!this.$elem;
  }
}

$obj.set( $('.elem-2').prev() );

console.log($obj.isExists(), $obj.$elem.text());

$obj.del();

console.log($obj.isExists());


объект можно переделать и хранить массив элементов, соответственно переделать и методы манипуляции.

похожие механизмы реализованы например в React.js
там есть свой виртуальный DOM с которым и производится манипуляция, которая в последствии переносится на реальный DOM методом render
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
23 апр. 2024, в 20:08
400000 руб./за проект
23 апр. 2024, в 19:21
300 руб./за проект
23 апр. 2024, в 19:05
15000 руб./за проект