Question

我正在尝试删除列表中的项目，然后单击删除按钮。我认为我的问题可能在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();
}

Answer 1

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

Answer 2

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

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

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

3 个答案: