title: HTML removeChild() throws an unknown exception
body: <p>I seem to have a constant error with the function <code>removelink(id)</code>, below, which is called AFTER an item is added to a list, with an <code>onclick=""</code> behavior. Every time the function is called, an exception is thrown:</p>
  
  <blockquote>
    <p>"NotFoundError: Failed to execute removeChild' on 'Node': The node to
    be removed is not a child of this node."</p>
  </blockquote>
  
  <p>I am aware, usually that error gives the answer away. However, I double checked the <code>removeChild()</code> is calling within the right parent div, and the right child. However, it goes straight to the error.</p>
  
  <p>I am quite inexperienced with JS. Any help appreciated.</p>
  
  <pre><code>function removelink(id) {
      var itemname = 'item' + id;
      if(confirm("Are you sure you want to remove this item from the list?" + itemname) == true) {
          try {
              CKEDITOR.remove('leditor'+ id);
              document.getElementById('listeditor').removeChild(document.getElementById(itemname));
              x--;
              limit++;
              document.getElementById("btnadditem") = '+ Add an item('+limit+') ';
              renumber();
              event.preventDefault();
          }
          catch(i) {
              alert("Error Thrown: " + i);
              return false;
          }
      }
      return false;
  }
  
  /*
  *(Purpose: Creates a new item based on the numbering of var x, an int starting at 0, and initiates the textbox + drawing)
  */
  
  function addNewItem() {
      if(limit &gt;= 1){
          var divcode = document.createElement();
  
          divcode.innerHTML = '&lt;div id="item'+ x +'"&gt;&lt;div class="input-group"&gt;&lt;span id="itemNumid'+ x +'" class="input-group-addon"&gt;'+ x +'&lt;/span&gt;&lt;input type="email" class="form-control" name="header'+ x +'" placeholder="Item header"s tyle="border-bottom:none;" &gt;&lt;span class="input-group-addon" style="padding: 0px 0px;" &gt;&lt;button  class="btn btn-danger btn-xs" id="btnremove'+x+'" onclick="removelink('+x+'); return false;" style="height: 41px; width: 41px;" &gt;&amp;#10006&lt;/button&gt;&lt;/span&gt;&lt;/div&gt;&lt;textarea  name="editor'+ x +'" id="leditor'+ x +'"  class="form-control ckeditor" rows="8" style="resize:none;border-top:none;" placeholder="Item Content"&gt;&lt;/textarea&gt;&lt;hr /&gt;&lt;/div&gt;';
  
          document.getElementById("listeditor").appendChild(divcode); 
  
          //CKEDITOR.inline( document.getElementById( 'editable' ) )
          CKEDITOR.replace('leditor'+ x);
          //createEditor(x);
          //$( 'textarea#leditor' + x ).ckeditor();
          //document.getElementById('leditor' + x).className += " ckeditor"
          x++;
          limit--;
          if(limit != 0) {
              document.getElementById("btnadditem").innerHTML = " + Add an item("+limit+") ";
          }
          else {
              document.getElementById("btnadditem").innerHTML = "Limit Reached";
              document.getElementById("btnadditem").className += "disabled";
          }
      }
      return false;
  }
  </code></pre>
  
  <p>In the HTML, I have a <code>&lt;div id ="listeditor"&gt;</code> that loads up, which contains the <code>div</code>s with ids <code>item1</code>, <code>item2</code>, <code>item3</code>, etc...</p>
  
  <p>Inside those <code>div</code>s more <code>div</code>s to organize the display of the code.</p>