title: how to fade out a div after clicking on a button inside of it?
body: <p>I want to have many div elements and each element will have its own "button" element inside it. When the button is clicked, the div containing it should  slowly fade out.</p>
  
  <p>I first tested out the idea by passing the parent of the "button" element (which will be the div element) inside "onclick" event. The function called stored the opacity inside a variable and decreased it by 0.1 if the opacity was greater than 0. This effect could be seen every time the "button" inside  div was clicked until it became zero and the <code>&lt;div&gt;</code> disappeared. </p>
  
  <p>I want to achieve this automatically over a period of time that looks like an animation, so I thought of using the setTimeout or setInterval functions inside the main function that was called. But, the code executes instantaneously as if the javascript just ignored the timers. I have included a console.log to print the value of opacities. I could see them compute to 0 instantaneously.(setInterval also fails for me)
  Its the same as if I was setting the "display" property to "none" inside the function.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var btn = document.getElementById("start");
  var timerID = 0;
  
  function hide(elem) {
    var opacity =
      Number(window.getComputedStyle(elem).getPropertyValue("opacity"));
    if (opacity &gt; 0) {
      opacity = opacity - 0.1;
      console.log(opacity);
      elem.style.opacity = opacity;
      /* you can simply comment out the setTimeout function  and see that the 
      opacity reduces on every click of the &lt;button&gt; */
      setTimeout(hide(elem), 2000);
    } else {
      clearTimeout(timerID);
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
    height: 250px;
    width: 250px;
    background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
    &lt;button id="start" onclick="hide(this.parentNode)"&gt;CLICK 
      ME&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>