title: How to remove an attribute from a DOM element using Javascript?
body: <p>i am trying to use javascript to remove an attribute from a DOM node:</p>
  
  <pre><code>&lt;div id="foo"&gt;Hi there&lt;/div&gt;
  </code></pre>
  
  <p>First i add an attribute:</p>
  
  <pre><code>document.getElementById("foo").attributes['contoso'] = "Hello, world!";
  </code></pre>
  
  <p>Then i remove it:</p>
  
  <pre><code>document.getElementById("foo").removeAttribute("contoso");
  </code></pre>
  
  <p>Except the attribute is still there.</p>
  
  <p>So then i try to <em>really</em> remove it:</p>
  
  <pre><code>document.getElementById("foo").attributes['contoso'] = null;
  </code></pre>
  
  <p>And now it's <code>null</code>, which is different than when it started, which was <code>undefined</code>.</p>
  
  <p>What is the correct way to remove an attribute from an element?</p>
  
  <p><a href="http://jsfiddle.net/7su7C/" rel="noreferrer">jsFiddle playground</a></p>
  
  <p><strong>Note</strong>: Replace the attribute <code>contoso</code>, with the attribute <code>required</code>, and you'll understand what <a href="https://stackoverflow.com/questions/18770369/how-to-set-html5-required-attribute-in-javascript">i'm <em>trying</em> to do.</a></p>
  
  <h1>State table</h1>
  
  <pre><code>                       foo.attributes.contoso  foo.hasAttribute("contoso")
                         ======================  ===========================
  Before setting         undefined               false
  After setting          Hello, world!           false
  After removing         Hello, world!           false
  After really removing  null                    false
  </code></pre>