无法从 JavaScript 中的无序列表中删除单个列表项答案

【问题标题】：Unable to delete individual list items from unordered list in JavaScript无法从 JavaScript 中的无序列表中删除单个列表项
【发布时间】：2021-07-05 22:27:32
【问题描述】：

我尝试创建一个函数来删除单个列表项，方法是使用 addEventListener 到无序列表，该列表调用一个函数来检查是否为该列表项单击了“删除”按钮。如果单击“删除”按钮，则该函数应该删除列表项。但这似乎不起作用。下面是代码：

<!doctype html>


<html>
    <head>
        <meta charset='UTF-8'>
        <link rel='stylesheet' href='listStyle.css'>
    </head>
    <body>
        <h2 id='heading'>grocery list</h2>
        <p>enter item into text box and press "enter" or click "submit".</p>
        <p>to remove item, click "remove".</p>
        <p>to reset list, click "reset".</p>
            <input type = 'text' id = 'item' name = 'item'><br><br>
            <button id = 'myBtn' onclick = 'myFunction()'>submit</button>
            <button onclick = 'resetFcn()'>reset</button>
        </form>
        <script>
        
            var str = document.getElementsByTagName('h2');
            var strUpper = str[0].innerHTML.toUpperCase();
            document.getElementById('heading').innerHTML = strUpper;
            
            var res = document.createElement('ul');
            res.setAttribute('id', 'myUL');
            res.addEventListener('click', delBtn);
            
            var input = document.getElementById('item');
            input.addEventListener('keyup', function(event){
                if(event.keyCode===13) {
                    document.getElementById('myBtn').click();
                }
            });
                        
            function myFunction() {
                let x = document.getElementById('item').value;
                if (x == '') {
                    alert ('enter input before submitting');
                }
                else {
                    document.body.appendChild(res);
                    var listItem = document.createElement('li');
                    const node = document.createTextNode(x);
                    
                    var btn = document.createElement('button');
                    btn.innerHTML = 'remove';
                    btn.setAttribute('id', x);
                    btn.setAttribute('class', 'delete');
                    
                    var att= document.createAttribute('style');
                    att.value = 'float: right';
                    btn.setAttributeNode(att);
                    
                    listItem.append(x, ' ');
                    listItem.appendChild(btn);                   
                    res.appendChild(listItem);
                    item.value = '';
                }
            }
            
            function resetFcn() {
                while (res.firstChild) {
                    res.removeChild(res.firstChild);
                }
            }
            
            function delBtn() {
                if(event.target.classList.contains('delete')){
                    event.target.closest('listItem').remove();
                }
            }       
            
        </script>

    </body>
    
    
</html>

【问题讨论】：

标签： javascript

【解决方案1】：

只需在 myFunction 函数中添加删除按钮的点击处理程序即可：

function myFunction() {
    let x = item.value;
    if (x == '') {
        alert ('enter input before submitting');
    }
    else {
        const listItem = document.createElement('li');
        listItem.innerText = x;

        const btn = document.createElement('button');
        btn.innerText = 'remove';

        btn.addEventListener("click", (evt) => {
            listItem.remove();
        }); //this way you can delete the list item because it is in the same scope

        listItem.appendChild(btn);
        myUl.appendChild(listItem);
        item.value = '';
    }
}

这不在你的问题范围内，但我也会清理你的代码，删除结束表单标签，使用 const/let 而不是 var。不要使用keyCode，因为它已被弃用，...

我还在您的 html 中插入了 ul 元素：

<ul id="myUl">

</ul>

const myUl = document.getElementById("myUl");

对于您的重置功能，您只需将 ul 的 innerHtml 设置为空字符串，而不是遍历所有元素：

function resetFcn() {
    myUl.innerHTML = "";
}

希望这有帮助，祝你好运！

【讨论】：