Javascript 如何通过单击列表项中的按钮来删除整个列表项？

我正在申请一份待办事项清单。我想通过单击附加到列表元素的按钮来删除项目，但它只删除按钮，而不删除整个元素。当前，

元素在

中通过以下方式：

function newElement() {
    event.preventDefault(); // stop default redirect

    var li = document.createElement("li"); // create an <li> element

    /* make a text node from the input and put it in the <li> */
    var inputValue = document.getElementById("task").value; // retrieve value of text box
    var t = document.createTextNode(inputValue); // create a text node of the box value
    li.appendChild(t); // put the text node in the single <li>

    /* attach a button to the <li> element that deletes it */
    var btn = document.createElement("BUTTON"); // Create a <button> element
    btn.innerHTML = "X"; // Insert text
    btn.className = "button" // add class name for CSS targeting
    btn.addEventListener('click', removeItem); // add event listener for item deletion

    li.appendChild(btn); // Append <button> to <li> 

    li.addEventListener('click', checkToggle); // add event listener for a click to toggle a strikethrough

    appendItem("list", li); //append the li item to the ul
}

---

我想让按钮删除整个

节点，但它只删除其中的按钮部分。

只需将这一步移到层次结构的上一步

function removeItem() {
    this.parentNode.parentNode.removeChild(this.parentNode);
}

---

看看这个，我认为您需要添加另一个parentNode。您现在似乎只是在删除按钮。

使用，这样您就不会处理子元素引用

function removeItem() {
  this.parentNode.remove()
  // this.closest('li').remove()
}

或者，既然你有一个引用，就把它删除吧

btn.addEventListener('click', function () { li.remove() })

---

请包括您的html文件Summine

btn.addEventListener（'click'，function（）{li.remove（）}）

或

this.parentNode.remove（）

如果您使用jQuery，一个很好的、简单的方法就是使用

.remose（）

方法-它会查找与查询字符串匹配的最接近的父级。在您的例子中，

$（“#myButton”）。最近的（'li'）

Oops，没有看到上面的一个。我不熟悉堆栈溢出。

btn.addEventListener('click', function () { li.remove() })