title: JS: How to remove items from a list when they are checked and button clicked?
body: <p>I am trying to remove items in a list when they are checked-off and then the remove button clicked. I think my problem may be in the removeItem function.  <code>var x = document.getElementById("items-listed &lt;li&gt;");</code> because when i remove <code>&lt;li&gt;</code> the entire list is removed.</p>
  
  <pre><code>&lt;div&gt;
    &lt;div id="center-container"&gt;
      &lt;h4&gt;Enter an Item for Your Shopping List:&lt;/h4&gt;
      &lt;hr /&gt;
      &lt;form name="form"&gt;
        &lt;label for="item"&gt;Item:&lt;/label&gt; 
        &lt;input type="text" placeholder="Shopping Items" id="item" name="itemEntered" /&gt;
        &lt;input type="button"  value="Enter" id="Enter" onclick="javascript:addItem();" /&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;div id="items-container"&gt;
      &lt;h4&gt;Your list of Items:&lt;/h4&gt;
      &lt;form&gt;
        &lt;input type="button" value="Remove selected items" onclick="javascript:removeItem();" /&gt;
      &lt;/form&gt;
      &lt;hr /&gt;
      &lt;ul id="items-listed"&gt;
  
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  function addItem() {
      var item = [];
      item = document.getElementById('items-listed');
      item.innerHTML += "&lt;li&gt;&lt;input type='checkbox'&gt;" + document.form.itemEntered.value + "&lt;/li&gt;";
  }
  function removeItem () {
    var x = document.getElementById("items-listed &lt;li&gt;");
    x.remove();
  }
  </code></pre>