title: Remove item from selection jquery
body: <p>Let's say I declare an empty jQuery selection, <code>$foo</code></p>
  
  <pre><code>var $foo = $();
  console.log($foo.length); // 0
  </code></pre>
  
  <p>Then, at some point, <code>&lt;div id="foo"&gt;&lt;/div&gt;</code> gets added to the document.</p>
  
  <pre><code>$foo = $('#foo');
  console.log($foo.length); // 1
  </code></pre>
  
  <p>I'd like to remove the element <code>$foo</code> by calling <code>.remove()</code> on the selection. I'd expect the selection to reflect the fact that the element is no longer in the DOM, but this doesn't appear to be the case. </p>
  
  <pre><code>$foo.remove();
  console.log($foo.length); // 1
  </code></pre>
  
  <p>In the simple case where I'm removing the element in question, I can check the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node.parentNode" rel="nofollow">parentNode</a> property of the element using <a href="http://api.jquery.com/prop/" rel="nofollow">.prop()</a></p>
  
  <pre><code>if ( $foo.prop('parentNode') )
     // Exists
  else
     // Does not exist
  </code></pre>
  
  <p>But what if I remove <code>$foo</code>'s parent instead of <code>$foo</code>? What if <code>$foo</code> gets modified such that the original selector doesn't match the element? How can I reliably detect that <code>$foo</code> is no longer in the document? And ultimately, is there a way for this to be reflected in the original selection?</p>