无法从ul中删除多个li

如何解决无法从ul中删除多个li

我正在创建课程的待办事项列表：

实验4：待办事项列表让我们创建一个简单的待办事项列表，它支持以下操作：将项目添加到列表中列表将项目标记为已完成删除的项目应消失完全。完成的项目应显示在底部（或单独的列表），并在其中一行。

我无法从我的ul中删除多个li。删除第一个错误消息。

lab-04.js：16未捕获的DOMException：无法在以下位置执行“ removeChild” “节点”：要删除的节点不是该节点的子节点。在 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>

非常感谢您的帮助，随时准备把我的头发拔掉

解决方法

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

在块范围内声明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

如何解决无法从ul中删除多个li

解决方法

相关推荐