删除最后一个元素后未定义父节点

Question

我正在尝试创建一个待办事项列表，您可以在其中动态附加一个删除按钮，该按钮与父 div 中的每个新附加元素一起出现。单击删除按钮应该[只删除相应的新元素

这适用于列表中的最后一项，但是当我尝试删除其他项时，控制台说它的父节点为空。

关于这里发生了什么的任何建议？

var input = document.getElementById("boxInput");
var output = document.getElementById("output")
var submit = document.getElementById("submit")
var i = 0;

function addElement(parentId, elementTag, elementId, html) {
    var output = document.getElementById(parentId);
    var newElement = document.createElement(elementTag);
    newElement.setAttribute('id', elementId);
    newElement.innerHTML = html;
    output.appendChild(newElement)
}

function removeElement(elementId) {
    var element = document.getElementById(elementId);
    element.parentNode.removeChild(element);
}

var itemId = 0;

function additem() {
    i += 1
    itemId++;
    const btn = document.createElement("button");
    btn.onclick = function() {}
    var html = i + ". " + input.value + " " + `<button onclick="javascript:removeElement('item-' + itemId + ''); return false;">X</button>`;
    addElement("output", "p", ("item-" + itemId), html);
    return itemId
}


submit.addEventListener("click", additem);

#box {
    margin:auto;
    border-width: 3px;
    border-radius:5px;
    border-color:black;
    border-style:solid;
    width:300px;
    height:100px;
    margin-top:200px;
    line-height:100px;
    display:flex;
    justify-content:center;
    align-items:center;
}

#boxInput {
    width:150px;
    text-align:center;
    margin-right:5px;
   
}

#output {
    
    margin-top:20px;
    width:100%;
    text-align:center;
}

h1 {
    margin:center;
    text-align:center;
    position:relative;
    top:190px;
}

.delete {
    margin-left:5px;
}

<h1>To Do List!</h1>
<div id="box">
    <input id="boxInput" placeholder="add an item"/>
    <button id="submit">Submit</button>
</div>
<div id="output">
</div>

Answer 1

不需要itemId 或类似的东西。只需为每个待办事项创建一个div。向其中添加 <button> 和 <span>。将事件侦听器添加到您从 output 元素中删除整个 todo div 的按钮

var input = document.getElementById("boxInput");
var output = document.getElementById("output")
var submit = document.getElementById("submit")


function additem() {
    const todo = document.createElement('div');
    const btn = document.createElement('button');
    btn.innerHTML = "Remove"
    const text = document.createElement('span');
    text.innerHTML = input.value;
    todo.appendChild(text);   
    todo.appendChild(btn);

    btn.addEventListener('click', (e) => {
      output.removeChild(todo)
    })
    
    output.appendChild(todo)
}


submit.addEventListener("click", additem);

#box {
    margin:auto;
    border-width: 3px;
    border-radius:5px;
    border-color:black;
    border-style:solid;
    width:300px;
    height:100px;
    margin-top:200px;
    line-height:100px;
    display:flex;
    justify-content:center;
    align-items:center;
}

#boxInput {
    width:150px;
    text-align:center;
    margin-right:5px;
   
}

#output {
    
    margin-top:20px;
    width:100%;
    text-align:center;
}

h1 {
    margin:center;
    text-align:center;
    position:relative;
    top:190px;
}

.delete {
    margin-left:5px;
}

<h1>To Do List!</h1>
<div id="box">
    <input id="boxInput" placeholder="add an item"/>
    <button id="submit">Submit</button>
</div>
<div id="output">
</div>