.remove() does not remove element from the dom

Question

I want to remove an element from the dom using its id

HTML

<div id="no-js">
     Sorry for the inconvenience<br/>
     Your browser does not support javascript or it must be  disabled.<br/>
     To access the features of our website<br/><br/>
     Enable your javascript or upgrade to the browser that supports javascript.
</div>

jQuery

 var x = $("#no-js"); 
 console.log(x.html());
 x.remove(); // does not remove the element from dom why?
 console.log(x.html()); // it displays html content inside it
 console.log(x.length); // results 1 
 x.empty(); // removes the child elements, working as expected
 console.log(x.html()); // html content is empty
 console.log(x.length); // length is 1

.remove() does not seem to work as expected ? This is the fiddle http://jsfiddle.net/QGsza/14/

Answer 1

.remove() removes the element from the dom, but still the variable x holds a reference to it that is the reason for x.length to return 1

If you test again console.log($("#no-js").length) it will give 0 as it triggers a new dom search and the element is already removed

Demo: Fiddle