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

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

selectedItem

Javascript基于类删除点击子

1 个答案: