Javascript - Deleting a list item
<p>How do you properly delete list item by clicking on it?</p>

<p>I have been using the following line for code to delete an item but instead this deletes the entire list itself:</p>

<pre><code>var list = document.getElementById("shoppinglist");  

list.onclick = function() { list.parentNode.removeChild(list);} 
</code></pre>

<p>I have been searching online on how to do this and the same kind of code keeps appearing and I am not sure how to solve this. I assumed that the list item generated was a child of the "shoppinglist".</p>

<p>I am very new to Javascript and I know this is a rookie mistake but I would really appreciate any help. Thank you.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
&lt;html dir="ltr" lang="en-gb"&gt;
&lt;head&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
&lt;style&gt;
body { 
 /* Sets the width then uses the margin auto feature to centre the page in the browser */
 width:800px;
 margin: 0px auto; /*0px top/bottom auto left/right */
 font-size:10px; /* By default fonts are usually 16px but may not be in some browsers */
}
p, li {
 font-size:1.5em; /* Set all text to be 1.5 * overall font size = 15 pixels */
}
section {
 /* each of the two sections will use just under half the width of the width of the body */
 width:395px;
 display:block;
}
#choices {
 /* float the choices list to the left of the page */
 float:left;
 background-color: #FFFF99; 
}
#cart {
 /* float the shopping cart to the right of the page */
 float:right;
 background-color: #7FFF00; 
}
.cartlist {
 /* Simplify the display of the lists, removing default bullet points and indentation */
 list-style-type:none;
 margin:0px;
 padding:0px;
 width:inherit;
}
.cartlist li {
 /* Set each list item to be 2* the height of the text */
 height:2em;
}
.cartlist li:nth-child(odd) {
 /* Colour odd list items ie first, third, fifth etc, a different colour */
 background-color:#eee;
}
#outputinfo {
 /* prevents the DIV from joining the floating behaviour so it displays below the lists */
 clear:both;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;section id="choices"&gt;
 &lt;p&gt;Available Choices&lt;/p&gt;
 &lt;ul id="sourcelist" class="cartlist"&gt;
  &lt;li data-value="2.99"&gt;&amp;pound;2.99 : Chocolate&lt;/li&gt;
  &lt;li data-value="3.49"&gt;&amp;pound;3.49 : Cereal&lt;/li&gt;
  &lt;li data-value="0.98"&gt;&amp;pound;0.98 : Milk&lt;/li&gt;
  &lt;li data-value="0.89"&gt;&amp;pound;0.89 : Bread&lt;/li&gt;
  &lt;li data-value="3.79"&gt;&amp;pound;3.79 : Coffee&lt;/li&gt;
  &lt;li data-value="2.53"&gt;&amp;pound;2.53 : Strawberries&lt;/li&gt;
  &lt;li data-value="3.89"&gt;&amp;pound;3.89 : Cheesecake&lt;/li&gt; 
 &lt;/ul&gt;
&lt;/section&gt;
&lt;section id="cart"&gt;
 &lt;p&gt;Shopping Cart&lt;/p&gt;
 &lt;ul id="shoppinglist" class="cartlist"&gt;&lt;/ul&gt;
&lt;/section&gt;
&lt;div id="outputinfo"&gt;
 &lt;p&gt;&lt;button id="calctotal"&gt;Calculate Total&lt;/button&gt; : &lt;span id="totalresult"&gt;&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;

&lt;script&gt;

function getTargetElement(e) {
 var targetelement=null;
 targetelement=(e.srcElement || e.target || e.toElement)
 return targetelement;
}

function calcTotal() {
 var shoppinglist=document.getElementById("shoppinglist");
 var total=0;
 for(i=0;i&lt;shoppinglist.children.length;i++) {
  total+=parseFloat(shoppinglist.children[i].getAttribute("data-value"));
 }
 var totalresult=document.getElementById("totalresult");
 totalresult.innerHTML="&amp;pound;"+total.toFixed(2);
}

function handleEvent(e) {
 var listclicked=getTargetElement(e);
 var newlistitem=document.createElement("li");
 var datavalue=listclicked.getAttribute("data-value");
 newlistitem.setAttribute("data-value",datavalue);
 newlisttext=document.createTextNode(listclicked.innerHTML)
 newlistitem.appendChild(newlisttext);
 var shoppinglist = document.getElementById("shoppinglist");
 shoppinglist.appendChild(newlistitem);
 
 var list = document.getElementById("shoppinglist");   
 
 list.onclick = function() { list.parentNode.removeChild(list);} 


 console.log(listclicked);
}

function removeItem(e){

 var listclicked=getTargetElement(e);
 var node = document.getElementById('shoppinglist');
 listclicked.parentNode.removeChild(listclicked);
}

document.onreadystatechange = function(){
 if(document.readyState=="complete") {
 var sourcelist=document.getElementById("sourcelist");
 
 for(i=0;i&lt;sourcelist.children.length;i++) {
   if(document.addEventListener) {
    sourcelist.children[i].addEventListener("click", handleEvent, false);

   } else {
    sourcelist.children[i].attachEvent("onclick", handleEvent);
   }
  
  var totalbutton=document.getElementById("calctotal");
  if(document.addEventListener) {
   totalbutton.addEventListener("click",calcTotal,false);
  } else {
   totalbutton.attachEvent("onclick",calcTotal);
  }

  }

 }
}
&lt;/script&gt;
 
&lt;/html&gt;</code></pre>
</div>
</div>
</p>