title: How to unset data attribute of object html tag. Empty string shows whole page inside
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function fn()
  {
    document.getElementById('obj').data = "";
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="background-color:blue"&gt;abc
      &lt;object id="obj" data="myImg.svg" type="image/svg" &gt;
    
    
    &lt;/object&gt;
  
  &lt;/div&gt;
  
  &lt;div style="background-color:red"&gt;def
  
  &lt;/div&gt;
  
  &lt;br&gt;
  
  &lt;button onclick="fn()"&gt;empty the data att&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have an object tag. It's data attribute points to an SVG file. I want to dynamically change the data attribute and then to be able to clear it to.</p>
  
  <p>But setting to empty (data="") reconstructs the whole page into the object tag.
  How to empty it correctly please?</p>