title: Deleting the last Element in a Div [JavaScript]
body: <p>I'm having a strange problem. I'm trying to make a program that will add and delete div's inside another div called "body". To add divs, I use <code>document.getElementById("body").innerHTML</code>. Adding works fine. However, in the deleting function, I replace the "body" id with a variable with the id of the div that will be deleted. But when I run the code, I get the error "cannot set innerHTML of null". I tried to replace the id variable with a fixed local variable, and it worked fine. I also tried to add quotes to the variable but that didn't work either. Is there any reason why I can't set the id to a changing variable? Thanks.</p>
  
  <p>Here is my code:</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 i = 1;
  
  function myFunction() {
    var addDiv = document.getElementById("body2");
    addDiv.innerHTML += "&lt;div id = '" + i + "'&gt;&lt;br&gt;&lt;textarea id = '1' &gt; foo &lt; /textarea&gt;&lt;/div &gt; ";
    i++;
  }
  
  function myFunction2() {
    var deleteDiv = document.getElementById(i);
    deleteDiv.innerHTML = "";
    i--;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="body2"&gt;
    &lt;div id="0"&gt;
      &lt;textarea id="text"&gt;lol&lt;/textarea&gt;&lt;button onclick="myFunction()"&gt;Add&lt;/button&gt;
      &lt;button onclick="myFunction2()"&gt;Delete&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>