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

Question

[eugene159]

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

<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);
});

Comments

[Lynn «Кофеман»]

querySelector

[eugene159]

Алексей Тен, тогда не получится применить метод prev()? Мне нужно положить в переменную объект, о котором я ничего не знаю (ни классов, ни id), только то, что он prev.

[Lynn «Кофеман»]

Не получится. Но в целом вы хотите какой-то странной фигни.
Приведите реальную задачу

[alex-1917]

и как нам теперь раскурить вот это вот всё?

[Сергей Карвасарный]

eugene159, в js нет prev() )) preventDefault

[brees]

Сергей Карвасарный, что общего у prev и preventDefault ?

[Сергей c0re]

Сергей Карвасарный,
.previousElementSibling

let elem_1 = document.querySelector('.elem-2').previousElementSibling;

Answer 1

[Никита]

$.contains(document, $elem_1)

Answer 2

[Сергей c0re]

// Выдает 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