javascript JS：如何在选中并单击按钮时从列表中删除项目？

JS: How to remove items from a list when they are checked and button clicked?

提问by Beast_Code

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.

我试图在列表中的项目被选中时删除它们，然后单击删除按钮。我认为我的问题可能出在 removeItem 函数中。 var x = document.getElementById("items-listed <li>");因为当我删除<li>整个列表时。

<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();
}

回答by leaf

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

一点帮助：http: //jsfiddle.net/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 jQuerysolution : http://jsfiddle.net/wared/N3m65/.

这是一个jQuery解决方案：http: //jsfiddle.net/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 :

正如 BlackSheep 建议的那样，您也可以这样做：

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

回答by undefined

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

getElementById只返回一个元素，它不会选择具有特定 id 的元素的后代，您可以使用以下.querySelectorAll()方法：

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.net/n2Hxs/

http://jsfiddle.net/n2Hxs/

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

请注意，上面的代码在旧浏览器中不起作用，为了支持这些浏览器，您可以使用 for 循环：

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--]);
        }
    }
}

回答by dimitris tseggenes

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;
        }
    }
}