How to remove a div off the page using JavaScript
<p>½I'm trying to make a close button for a dynamically created div.</p>

<p>At the moment the below code can create a div repeated, but I cannot seem to get the div close button to work. I'm trying to make it so even if multiple divs are open, the close button works on each.</p>

<p>If there is a way to do via jQuery please let me know as I couldn't get it to work.</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-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;title&gt;Test Platform&lt;/title&gt;

    &lt;head&gt;
        &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;style&gt;
        body {
          margin: 0 0;
        }
        #container {
          border: 1px solid blue;
          white-space: nowrap;
          overflow: auto;
            font-size: 0;
        }

        #container &gt; * {
          font-size: 8px;
          font-family: 'Open Sans', sans-serif;
        }

        #headerbar {
          font-size: 30px;
          color: white;
          padding-left: 10px;
          border: 1px solid darkgrey;
          height: 50px;
          background-color: darkslateblue;
        }
        #sidebar {
          display: inline-block;
          color: black;
          border: 1px solid darkgrey;
          width: 50px;
          height: 100vh;
          vertical-align: top;
          background-color: lightgrey;
          text-align: center;
          padding-top: 10px;
        }
        .content {
          display: inline-block;
          width: 200px;
          height: 100vh;
          border: 1px solid lightslategrey;
          margin: 0 1px 0 0;
          vertical-align: top;
          background-color: lightsteelblue;
        }
        .close {
            display: inline-block;
            padding: 2px 5px;
            background: #ededed;
            float: right;
        }
        .close:hover {
            float: right;
            display: inline-block;
            padding: 2px 5px;
            background: #ccc;
            color: #fff;
        }
    &lt;/style&gt;

    &lt;body&gt;
        &lt;div id='container'&gt;
            &lt;div id='headerbar'&gt;Header Div&lt;/div&gt;
            &lt;div id='sidebar'&gt; &lt;input type="button" value="O" id="calculate" /&gt;
                &lt;br/&gt;&lt;br/&gt;
                &lt;br/&gt;&lt;br/&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;script type='text/javascript'&gt;
            window.onload = function(){
                document.getElementById('close').onclick = function(){
                    this.parentNode.parentNode.parentNode
                    .removeChild(this.parentNode.parentNode);
                    return false;
                };
            };
        &lt;/script&gt;

        &lt;script&gt;
            function makeResponseBox() {
                document.getElementById("calculate").onclick = function()
                {
                    var responseBox = document.createElement("DIV"); //create &lt;div&gt;
                    var spanclose = document.createElement("span");
                    var spantext = document.createTextNode("X");
                    spanclose.appendChild(spantext);
                    spanclose.setAttribute("class", "close" );
                    responseBox.setAttribute("class", "content" );
                    responseBox.appendChild(spanclose);
                    document.getElementById('container').appendChild(responseBox);
                }
            } // Close function (makeResponseBox)
            window.onload = makeResponseBox;
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>