<分区>
我试图在单击按钮后删除按钮的父元素，它是一个列表元素。
编程世界的新手，所以它可能很简单，但我无法根据我在堆栈溢出和互联网上发布的其他人的发现找到解决方案。请有人指出我做错了什么？
我正在结合使用 Javascript 和 Jquery。我正在尝试利用我已经知道的技能加上一些研究来完成工作。我正在学习使用纯 Javascript 进行类似删除事件所需的技术和技能，但现在我只是在这方面使用 Jquery。
$(document).ready(function() {
document.getElementById("add").addEventListener("click", function() {
var taskinput = document.getElementById("task").value;
if (taskinput) {
var tasktext = document.createTextNode(taskinput);
var list = document.createElement("li");
list.appendChild(tasktext);
var button = document.createElement("button");
button.setAttribute("class", "completed");
button.innerHTML = "X";
list.appendChild(button);
document.getElementById("task-to-do").appendChild(list);
document.getElementById("task").value = " ";
} else {
alert("Please enter a task");
}
});
$("button .completed").click(function() {
$(this).closest("li").remove();;
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="container">
<header>
<h1>ENTER A TASK BELOW</h1>
<input type="text" id="task"><img id="add" src="add.png">
</header>
<div id="incomplete-tasks">
<h4>TO-DO LIST</h4>
<ul id="task-to-do">
</ul>
</div>