Javascript根据类点击删除子项

Question

我正在使用 vanilla javascript 制作一个基本列表。我可以添加项目，并在单击它们时更改其类别。现在，我希望在单击已选择的项目(因此它们的类已更改)时将其删除。在代码的底部，我尝试循环遍历列表，然后如果列表中的元素具有选定的类，则事件监听器将在单击时删除该元素，但这对我不起作用。关于我做错了什么有什么想法吗？ (现场演示:http://codepen.io/nicolaswilmot/pen/oXLgyq)

这是代码:

var list = document.getElementById("theList"); // Get the list

// Add new item to top of list
function addItem(e) {
    var userTxt = document.getElementById("userInput"); // Get user text
    var newItem = document.createElement("li");    // Create new list item
    var itemTxt = document.createTextNode(userTxt.value); // Get the text for item
    newItem.appendChild(itemTxt);                  // Add text to list item
    list.insertBefore(newItem, list.firstChild);    // Put new item at top of list
    newItem.className = 'defaultItem';              // Set default class for li
    document.getElementById("userInput").value = ''; // Clear the input box
    e.preventDefault(); // Prevent page from reloading when page is submitted
    // Changes list item class
    function changeClass () {
        newItem.className = 'selectedItem';
    }
    // Initialize array for list items
    listArray = [];
    // Loop through list, add items to array, update class and counter
    //      when items are clicked
    for (var i=0; i<list.children.length; i++) {
        listArray.push(newItem);
        listArray[i].addEventListener("click",changeClass);
        listArray[i].addEventListener("click",countStuff);
    }
}

var docForm = document.getElementById("theForm");  // Get the form element
docForm.addEventListener('submit',addItem,false);  // Call addItem function when form is submitted
docForm.addEventListener('submit',countStuff,false); //Call counter when form submitted

// Function for the list item counter
function countStuff() {
    // Get div container for counter
    var itemCount = document.getElementById("counter");
    // Get all list items that have not been selected (default class)
    var unselectedItems = document.querySelectorAll('li.defaultItem');
    //If more than one item, display plural "items"
    if (unselectedItems.length > 1) {
        itemCount.innerHTML = 'You still need '+unselectedItems.length+' items!';
    } else if (unselectedItems.length == 0) {
        itemCount.innerHTML = 'You have all items!';
    } else {
        itemCount.innerHTML = 'You still need '+unselectedItems.length+' item!';
    }
}

// Loop through the list
for (var i=0; i<list.children.length; i++) {
    // Remove items that are in selected state
    if (list.childNodes[i].className='selectedItem') {
        list.childNodes[i].addEventListener('click',function () {
            list.removeChild([i])},false);
    }
}

Answer 1

在元素具有 selectedItem 类后尝试删除该元素的代码位置没有意义，因为当页面没有项目时，该代码只会在页面加载时运行一次在列表中。相反，在添加 selectedItem 类的同一函数中，您可以将事件监听器绑定(bind)到该 DOM 元素，以便在下次单击时将其从列表中删除。 http://codepen.io/anon/pen/vOKEzz

function changeClass () {
    newItem.className = 'selectedItem';
    //Remove it on click!
    newItem.addEventListener('click',function () {
        list.removeChild(newItem)
    }, false);
}