title: how to remove DOM element from HTML to-do list using splice
body: <p>I am attempting to implement the splice method to remove items from a JavaScript to do list. With my current code, an item is clearly removed from the list when the remove button is clicked. </p>
  
  <p>However, clicking a remove button also appears to convert the list into a simple array with the default commas. Are there any recommendations on how to set up the remove function properly with the splice method? </p>
  
  <p>Much Appreciated!</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 array = [];
  
  function add() {
    var task = document.getElementById("task").value;
    array.push(task);
    var text = document.createTextNode(task);
    var li = document.createElement("li");
    var btn = document.createElement("button");
    btn.appendChild(document.createTextNode("x"));
    btn.setAttribute("onclick", 'remove()');
    li.appendChild(text);
    li.appendChild(btn);
    document.getElementById("myUl").appendChild(li);
  }
  
  function remove() {
    array.splice(1, 1);
    document.getElementById("myUl").innerHTML = array;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="task"&gt;
  &lt;button onclick="add()"&gt;add&lt;/button&gt;
  &lt;ul id="myUl"&gt;&lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>