无法从 ul 中删除多个 li

Question

我正在为 class 创建待办事项列表：

Lab 4: Todo List Let's make a simple todo-list which supports the following operations: add an item to the list remove an item from the list mark an item as completed Removed items should disappear entirely. Completed items should appear at the bottom (or in a separate list) with a line through them.

我无法从我的 ul 中删除多个 li。删除第一个后出现错误。

lab-04.js:16 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at HTMLButtonElement.removeBtn.onclick (http://127.0.0.1:5500/js/lab-04/lab-04.js:16:18)

奇怪的是，按钮被移除了，没有大惊小怪。

代码（js）：

let manipulateDom = () => {
    let container = document.getElementsByClassName('container')
    let toDoList = document.getElementById('to-do')
    let removeBtn = document.createElement('button')

    content = document.getElementById('userInput').value
    listItem = document.createElement('li')
    listItem.className = 'list-item'
    listItem.textContent = (content)

    removeBtn.appendChild(document.createTextNode('remove'))

    removeBtn.onclick = function() {
        toDoList.removeChild(removeBtn)
        
        toDoList.removeChild(listItem)
    
    }


    

    toDoList.appendChild(listItem)
    toDoList.appendChild(removeBtn)

    
}

(html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lab-04</title>
    <script src='/js/lab-04/lab-04.js'></script>
</head>
<body>
    <h4>To Do List</h4>
    <input type='text' id='userInput' placeholder="item to add">
    <input type="submit" onclick="manipulateDom()">

    <ul id='to-do'>
    </ul>

    <ul id='done'>
    </ul>
</body>
</html>

非常感谢任何帮助，准备好把我的头发拉出来

Answer 1

您将 listItem 放在 window 范围内，而 removeBtn.onclick 所做的是删除 window 范围内的 listItem，这就是为什么删除按钮只起作用一次，并且只对最后创建的元素起作用。

在块作用域中声明 listItem 它应该会再次工作

let manipulateDom = () => {
    let container = document.getElementsByClassName('container');
    let toDoList = document.getElementById('to-do');
    let removeBtn = document.createElement('button');

    let content = document.getElementById('userInput').value;
    let listItem = document.createElement('li');
    
    listItem.className = 'list-item';
    listItem.textContent = (content);

    removeBtn.appendChild(document.createTextNode('remove'))

    removeBtn.onclick = function() {
        toDoList.removeChild(removeBtn);
        toDoList.removeChild(listItem);
    };

    toDoList.appendChild(listItem);
    toDoList.appendChild(removeBtn);
}

<h4>To Do List</h4>
<input type='text' id='userInput' placeholder="item to add">
<input type="submit" onclick="manipulateDom()">

<ul id='to-do'>
</ul>

<ul id='done'>
</ul>

无法从 ul 中删除多个 li

Unable to delete multiple li from ul

html

javascript

dom

html-lists

removechild