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. var x = document.getElementById("items-listed <li>"); because when i remove <li> the entire list is removed.

<div>
  <div id="center-container">
    <h4>Enter an Item for Your Shopping List:</h4>
    <hr />
    <form name="form">
      <label for="item">Item:</label> 
      <input type="text" placeholder="Shopping Items" id="item" name="itemEntered" />
      <input type="button"  value="Enter" id="Enter" onclick="javascript:addItem();" />
    </form>
  </div>
</div>

<div>
  <div id="items-container">
    <h4>Your list of Items:</h4>
    <form>
      <input type="button" value="Remove selected items" onclick="javascript:removeItem();" />
    </form>
    <hr />
    <ul id="items-listed">

    </ul>
  </div>
</div>

function addItem() {
    var item = [];
    item = document.getElementById('items-listed');
    item.innerHTML += "<li><input type='checkbox'>" + document.form.itemEntered.value + "</li>";
}
function removeItem () {
  var x = document.getElementById("items-listed <li>");
  x.remove();
}

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. var x = document.getElementById("items-listed <li>"); because when i remove <li> the entire list is removed.

<div>
  <div id="center-container">
    <h4>Enter an Item for Your Shopping List:</h4>
    <hr />
    <form name="form">
      <label for="item">Item:</label> 
      <input type="text" placeholder="Shopping Items" id="item" name="itemEntered" />
      <input type="button"  value="Enter" id="Enter" onclick="javascript:addItem();" />
    </form>
  </div>
</div>

<div>
  <div id="items-container">
    <h4>Your list of Items:</h4>
    <form>
      <input type="button" value="Remove selected items" onclick="javascript:removeItem();" />
    </form>
    <hr />
    <ul id="items-listed">

    </ul>
  </div>
</div>

function addItem() {
    var item = [];
    item = document.getElementById('items-listed');
    item.innerHTML += "<li><input type='checkbox'>" + document.form.itemEntered.value + "</li>";
}
function removeItem () {
  var x = document.getElementById("items-listed <li>");
  x.remove();
}

• javascript
• html
• forms
• list
• button

• 1 Do you think this is an id : "items-listed <li>"? – user1636522 Commented Feb 6, 2014 at 16:31
• items-listed is an id but <li> is referring to the tag. – Beast_Code Commented Feb 6, 2014 at 16:32
• 1 "id is a case-sensitive string representing the unique ID of the element being sought." : developer.mozilla/en-US/docs/Web/API/… – user1636522 Commented Feb 6, 2014 at 16:33
• 1 you can use: document.querySelectorAll('#items-listed li input:checked') to get all selected checkboxes. but querySelectorAll is limited to only new browsers. check this page for browser patiblity developer.mozilla/en-US/docs/Web/API/… – Manuel Richarz Commented Feb 6, 2014 at 16:34
• @ManuelRicharz that solution seems more cleaner and easier to understand, but I am using Chrome and it is not removing the checked items. – Beast_Code Commented Feb 6, 2014 at 16:42

3 Answers 3

A little help : http://jsfiddle/wared/N3m65/.

<div>
    <button onclick="add()">add</button>
    <button onclick="rem()">rem</button>
</div>
<ul id="list">
    <li><input type="checkbox" /> item</li>
</ul>

function add() {
    var list = document.getElementById('list'),
        item = document.createElement('li');
    item.innerHTML = '<input type="checkbox" /> item';
    list.appendChild(item);
}

function rem() {
    var list = document.getElementById('list'),
        items = Array.prototype.slice.call(list.childNodes),
        item;
    while (item = items.pop()) {
        if (item.firstChild && item.firstChild.checked) {
            list.removeChild(item);
        }
    }
}

Here is a jQuery solution : http://jsfiddle/wared/N3m65/.

function jAdd() {
    $('#list').append('<li><input type="checkbox" /> item</li>');
}

function jRem() {
    $('#list').children().filter(function () {
        return this.firstChild.checked;
    }).remove();
}

As BlackSheep suggested, you could also do this :

function jRem() {
    $('#list li').has('input:checked').remove();
}

getElementById only returns one element, it doesn't select the descendants of an element that has a specific id, you can use the .querySelectorAll() method:

var x = [].slice.call(document.querySelectorAll("#items-listed li"));
x.filter(function(e) {
  //  Filtering the `li` that has a checked input child
  return e.firstChild.checked;
}).forEach(function(e) {
   e.remove(); // e.parentNode.removeChild(e);
}); 

http://jsfiddle/n2Hxs/

Note that above code won't work in older browsers, for supporting those browsers you can use a for loop:

var x = document.getElementById("items-listed"), 
    c = x.childNodes;

for (var i = 0; i < c.length; i++) {
    if (c[i].nodeType === 1) {
        if (c[i].firstChild.checked) {
           x.removeChild(c[i--]);
        }
    }
}

Try this function when you click the button. It worked perfectly for me.

function removeLi() {
    'use strict';
    var i,
        u_l = document.getElementById("items-listed"),
        items = u_l.getElementsByTagName("li");
    for (i = 0; i < items.length; i += 1) {
        if (items[i].firstChild.checked) {
            u_l.removeChild(items[i]);
            i = i - 1;
        }
    }
}