title: How to delete an <li> from list with javascript
body: <p>What im trying to do is to remove whatever list item a user clicks on  from the DOM using javscript. This is my code:</p>
  
  <pre><code>// Delete shape from ul event
      shapeList.onclick = function (event) {
          var shapesArray = shapesCtrl.getShapesArray();
          var target = event.target; // Getting which &lt;li&gt; was clicked
          var id = target.parentNode.id; // Getting the value of the li that was clicked
          canvasCtrl.deleteShape(shapesArray, id); // Deleting the targeted element from the array 
  
          var li = shapeList.childNodes;
  
          // Above i remove the object that the corresponds with the li the user clicked on but i cant remove the actual li itself... Ive tried to use li[id].remove() but it just keeps removing the 1st li even though the id might point to the last item for example.
  
      };
  </code></pre>
  
  <p>Can anybody please help me do this with vanilla js and not jquery. 
  Thanks! :)</p>