Javascript 待办事项列表关闭按钮有问题

我有一些代码，似乎正在工作，但在一个相当奇怪的方式。当我第一次刷新页面时，我有一个关闭按钮，它似乎工作正常，但当我创建一个新的待办事项列表项时，关闭按钮似乎停止工作，我无法确定原因

let addItem=document.getElementById（“submitButton”）；
让userInput=document.getElementById（“toDoInput”）；
让output=document.getElementById（“output”）；
让toDoItem=document.querySelector（“.toDoItem”）；
let close=document.querySelector（“.close”）；
让toDo=document.querySelector（“.toDo”）；
/*用户单击了addItem按钮
如果文本字段中有任何文本，则将该文本添加到待办事项列表中*/
addItem.addEventListener（“单击”，addToDo）；
函数addToDo（）{
变量html=`


${userInput.value}

X


`;
output.innerHTML+=html；
//添加提交按钮后，将输入重置为空白。
userInput.value=''；
}
//了解如何在此实现中简化关闭功能
//它不起作用了
关闭.addEventListener（“单击”，函数（e）{
控制台日志（“单击”）；
设x=e.target.parentElement；
x、 style.display=“无”；
e、 预防默认值（）；
});

+


洁净室

X


这里的问题是，当您重新呈现“输出”部分的内容时，会丢失绑定到原始“.close”元素的事件侦听器。解决此问题的一些选项，请查看一些示例。
您需要在关闭按钮上安装实时事件处理程序。应该有帮助。为了提供更多功能，如果您可以并且不介意使用JS库，那么使用jQuery将更简单、更直接

jQuery示例：

$(document).on("click", ".close", function() {
    $(this).parent().hide();
});

不需要阻止默认行为，因为它是一个div。
您已经非常接近了，而且您肯定不需要jQuery。
正如您在下面看到的，您不需要动态推送
。它永远不会改变

<header>

    <input type="text" placeholder="Enter Item Here..." id="toDoInput">
    <button id="submitButton">+</button>

</header>

<section id="output">
    <ul class="todo">
    </ul>
</section>


+



下面是重构后的javascript：

let addItem = document.getElementById("submitButton");
let userInput = document.getElementById("toDoInput");
let output = document.getElementById("output");
let toDoItem = document.querySelector(".toDoItem");
let toDo = document.querySelector(".todo");

/*User clicked the addItem Button
If there is any text inside the text field then add that text to the todo 
list */
addItem.addEventListener("click", addToDo);

function addToDo(e){
    e.preventDefault();
    var html = `<li class="toDoItem">
                <p>${userInput.value} </p> <p class="close" 
                onclick="removeChildElement(this);">X</p>
                </li>`;
   output.innerHTML += html;
   let close = document.querySelector(".close")
    // Resetting input to blank once a submit button has been added.
    userInput.value = '';
}


// Figure out how to make closing functionality simple this implementation
// isn't working
function removeChildElement(e) {
    let x = e.parentElement;
    let xParent = x.parentElement;
    xParent.removeChild(x);
    console.log(xParent);
}

let addItem=document.getElementById（“submitButton”）；
让userInput=document.getElementById（“toDoInput”）；
让output=document.getElementById（“output”）；
让toDoItem=document.querySelector（“.toDoItem”）；
让toDo=document.querySelector（“.toDo”）；
/*用户单击了addItem按钮
如果文本字段中有任何文本，则将该文本添加到todo中
名单*/
addItem.addEventListener（“单击”，addToDo）；
函数addToDo（e）{
e、 预防默认值（）；
var html=`

${userInput.value}
X
`；
output.innerHTML+=html；
let close=document.querySelector（“.close”）
//添加提交按钮后，将输入重置为空白。
userInput.value=''；
}
//了解如何在此实现中简化关闭功能
//它不起作用了
函数删除Childelement（e）{
设x=e.parentElement；
设xParent=x.parentElement；
xParent.removeChild（x）；
console.log（xParent）；
}

正如你所看到的，我做了一些改变。最重要的是你的关闭按钮问题。该函数获取其父级（^2）上的父级，然后删除其子级。那将是你的
元素

享受小提琴：使用。细节在演示中进行了注释。添加了一个
以便可以使用，它更简单，编写更少，而且我很懒


/*所有表单控件都由HtmlFormControl集合引用*/
var form=document.forms.toDo；
var td=形式元素；
var add=td.add；
var inp=td.input；
var out=td.输出；
var toDo=document.querySelector（'.toDo'）；
add.addEventListener（“单击”，addToDo）；
/*将动态创建的节点限制为“
”。这样做没有意义
||有几个`
`，每个都只有一个`
`。
*/
函数addToDo（）{
变量html=`

${inp.value}
X

`;
toDo.innerHTML+=html；
}
/*事件委派是一种利用事件冒泡的方式，因此
||可以注册单个祖先节点以侦听
||事件（如currentTarget）和通过事件传播的方式
||（冒泡）可以定位事件源（单击的节点/e.target）。
||在这个演示中，e.currentTarget是output#output和e.target是
||任何b.close。在特定条件下使用e.target是可能的
*/
/*之所以使用removeChild（），是因为display:none不是完全
||走了。标记不会保留在DOM中，因此可能不会
||看起来它就在那里，在某些条件下，节点可能是
||被认为是在场的。
*/
out.addEventListener（“单击”，函数（e）{
如果（e.target！==e.currentTarget）{
如果（e.target.className==“关闭”）{
设x=e.target.parentElement
x、 parentElement.removeChild（x）；
}
}
});
.item{
显示器：flex；
最大宽度：250px；
证明内容：之间的空间；
}
.项目跨度，
b.项目b{
显示：表格单元格；
}
b.项目b{
光标：指针
}
输入，
产出，
钮扣{
字体：继承
}

+


洁净室！
X


您正在构建
。动态关闭
元素，因此您需要利用
事件委派
。此答案在JQuery中，因此请记住将其放置在
文档之外。准备就绪
确切地说，它无法侦听不存在的内容。