title: I'm trying to delete a child element, but I keep getting the error node not found
body: <p>I'm very new to coding so I'm not sure if you get the whole picture with this much, but I can clarify more if this isn't sufficient. Greatly appreciate any help. Thank you!</p>
  
  <pre><code> //remove and complete svg format
   var removeSVG = '&lt;svg&gt;&lt;/svg&gt;';
   var completeSVG = '&lt;svg&gt;&lt;/svg&gt;';
  
  
   //user clicked on the add button
   //If there is any text in the input field add that to the Todo list
  document.getElementById('add').addEventListener('click', function () {
  var value = document.getElementById('item').value;
  if (value) {
      addItemTodo(value);
      document.getElementById('item').value = "";
  }
  
  });
  
  function deleteItem() {
  var item = this.parentNode.parentNode;
  var parent = this.parentNode;
  
  parent.removeChild(item);
  }
  
  function completeItem() {
  var item = this.parentNode.parentNode;
  var parent = this.parentNode;
  var id = parent.id;
  
  var target = (id === 'todo') ? document.getElementById('completed') : document.getElementById('todo');
  
  parent.removeChild(item);
  target.insertBefore(item, target.childNodes[0]);
  }
  
  
  //Adds a new item to the todo list
  function addItemTodo(text) {
  
  var list = document.getElementById('todo');
  
  var item = document.createElement('li');
  item.innerText = text;
  
  var buttons = document.createElement('div');
  buttons.classList.add('buttons');
  
  var remove = document.createElement('button');
  remove.classList.add('remove');
  remove.innerHTML = removeSVG;
  
  //add click event for remove button
  remove.addEventListener('click', deleteItem);
  
  var complete = document.createElement('button');
  complete.classList.add('complete');
  complete.innerHTML = completeSVG;
  
  //add click event for the complete button
  complete.addEventListener('click', completeItem);
  
  buttons.appendChild(remove);
  buttons.appendChild(complete);
  item.appendChild(buttons);
  list.insertBefore(item, list.childNodes[0]);
  
  }
  
    //add click event for remove button
  remove.addEventListener('click', deleteItem);
  </code></pre>
  
  <p>So I posted the whole javascript, so you get an idea of the structure, The html itself is just two  tags with id=todo and completed respectively</p>