title: Cloning a range doesn't work
body: <p>When i get a selection range, clone it, and then wipe out the content that was the source of the selection, why does the cloned object still get affected? I thought it would be independent (since it was cloned)</p>
  
  <p>Here's the code: <a href="https://plnkr.co/edit/A3TADtyyqkS6sI8ZJeaA?p=preview" rel="nofollow">https://plnkr.co/edit/A3TADtyyqkS6sI8ZJeaA?p=preview</a></p>
  
  <pre><code>&lt;p id='test' contenteditable="true"&gt;hello world&lt;/p&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>function test() {
      var r = document.getSelection().getRangeAt(0).cloneRange();
      console.log(r)
      $('p').empty();
      console.log(r);
  }
  
  $(function() {
      $('p').on('click', test)
  })
  </code></pre>
  
  <p>---EDIT---</p>
  
  <p>Mozilla api documentation states: <em>The returned clone is copied by value, not reference, so a change in either Range does not affect the other.</em></p>
  
  <p>Could this just be a quirk of the jquery's empty() method?</p>