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

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

【解决方案1】：

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/

请注意，上面的代码在旧浏览器中不起作用，为了支持这些浏览器，您可以使用 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--]);
        }
    }
}

【讨论】：

但检查 querySelectorAll 的浏览器兼容性：developer.mozilla.org/en-US/docs/Web/API/…
你不能错过这个警告：“这是一项实验性技术”:) developer.mozilla.org/en-US/docs/Web/API/ChildNode.remove.
@BlackSheep 有没有更简单的方法？
@JonaTheApprentice 嗯，DOM API 没有花哨的方法来做这件事，特别是旧版本。如果你不喜欢它的语法，你可以使用 jQuery。
@wared 是的，这是一种实验方法。我添加了替代.removeChild()。

【解决方案2】：

一点帮助：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);
        }
    }
}

这是一个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();
}

按照 BlackSheep 的建议，您也可以这样做：

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

【讨论】：

jQuery部分也可以是$('#list li').has('input:checked').remove()。
删除列表项：document.getElementById("menu_item").remove();
@xinthose 谢谢 :-) 但是显然在 IE 上仍然不可用：developer.mozilla.org/fr/docs/Web/API/ChildNode/remove :-|

【解决方案3】：

单击按钮时尝试此功能。它对我来说非常有效。

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

【讨论】：