使用javascript删除父元素

我的javascript有问题。我想创建某种待办事项列表，但我不知道如何删除某个项目

当创建一个项目时，它会用一个删除按钮添加到列表中，但我不知道当单击按钮时该如何删除该项目

我在addItem函数中有这个

var item = document.createElement("li");
item.innerHTML = itemText + "<button class='delete'>Delete item</button>";
list.appendChild(item);

---

必须使用从其父元素中删除父元素。
假设

按钮

指的是您的按钮元素：

button.parentNode.parentNode.removeChild(button.parentNode);

为了让你的按钮可以点击。你可能想做点什么

button.addEventListener('click', function(event)
{
    var button = event.target;
    button.parentNode.parentNode.removeChild(button.parentNode);
});

编辑： 由于Samuel Liew非常希望我添加它，下面是如何从

项的上下文中获得
按钮
元素（在设置
innerHTML
之后）：

综上所述：

var item = document.createElement("li");
item.innerHTML = itemText + "<button class='delete'>Delete item</button>";
var buttons = item.getElementsByTagName('button');
var button = buttons[buttons.length - 1];
button.addEventListener('click', function(event)
{
    var button = event.target;
    button.parentNode.parentNode.removeChild(button.parentNode);
});
list.appendChild(item);

var item=document.createElement（“li”）；
item.innerHTML=itemText+“删除项”；
var buttons=item.getElementsByTagName（“按钮”）；
var按钮=按钮[buttons.length-1]；
按钮。addEventListener（'click'，函数（事件）
{
var按钮=event.target；
button.parentNode.parentNode.removeChild（button.parentNode）；
});
列表。追加子项（项目）；
您有两个选择：

您可以将其作为处理程序直接附加到按钮，然后使用
this.parentNode
访问父元素。要真正删除它，您可能需要在层次结构上再上一层（DOM4在元素上定义了
remove
方法，但旧浏览器可能不支持该方法）。看起来是这样的：

var item = document.createElement("li");
var btn = document.createElement("button");
btn.className = "delete";
btn.innerHTML = "Delete item";
btn.addEventListener("click", deleteItem, false);
item.appendChild(btn);
list.appendChild(item);

// ...

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

function deleteItem(e) {
    var btn = e.target;

    // Since `button` elements can have elements inside them,
    // we start with the element that was the target of the
    // event and look to see if any the event passed through
    // a `button class="delete"` on its way to the list.
    while (btn && (btn.tagName != "BUTTON" || !/\bdelete\b/.test(btn.className))) {
        btn = btn.parentNode;
        if (btn === this) {
            btn = null;
         }
    }
    if (btn) {
        // Yes, it did -- remove the button's parent from the list
        // (`this` is the list, because that's what we hooked the
        // event on)
        this.removeChild(btn.parentNode);
    }
}


相反，我会使用事件委派：钩住列表上的
单击
，如果单击通过其中一个删除按钮，那么处理它：用于添加列表项和按钮的代码将保持不变。在一个位置，您将看到：

list.addEventListener("click", deleteItem, false);

而
deleteItem
将如下所示：

var item = document.createElement("li");
var btn = document.createElement("button");
btn.className = "delete";
btn.innerHTML = "Delete item";
btn.addEventListener("click", deleteItem, false);
item.appendChild(btn);
list.appendChild(item);

// ...

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

function deleteItem(e) {
    var btn = e.target;

    // Since `button` elements can have elements inside them,
    // we start with the element that was the target of the
    // event and look to see if any the event passed through
    // a `button class="delete"` on its way to the list.
    while (btn && (btn.tagName != "BUTTON" || !/\bdelete\b/.test(btn.className))) {
        btn = btn.parentNode;
        if (btn === this) {
            btn = null;
         }
    }
    if (btn) {
        // Yes, it did -- remove the button's parent from the list
        // (`this` is the list, because that's what we hooked the
        // event on)
        this.removeChild(btn.parentNode);
    }
}



下面是#2的一个实例：


var列表，项目，n；
//获取列表，向其中添加处理程序
list=document.getElementById（“列表”）；
list.addEventListener（“单击”，删除项，false）；
//添加项目；你可以随时这样做
对于（n=1；n，您也可以使用这个更简单的解决方案：
例如，使用图像库；

//

<div class="image">
  <img src="" alt="First">
  <button class="remove">X</button>
</div>
<div class="image">
  <img src="" alt="Second">
  <button class="remove">X</button>
</div>
<div class="image">
  <img src="" alt="Third">
  <button class="remove">X</button>
</div>
<div class="image">
  <img src="" alt="Forth">
  <button class="remove">X</button>
</div>

var x = document.querySelectorAll(".image");

for(var i = 0; i < x.length; i++) {
  x[i].querySelector(".remove").onclick = registerClickHandler;
}

function registerClickHandler () {
   this.parentNode.parentNode.removeChild(this.parentNode);

}


X
X
X
X
var x=document.queryselectoral（“.image”）；
对于（变量i=0；i

希望有帮助：）
函数注册表ClickHandler（）{
var x=document.queryselectoral（“.image”）；
对于（变量i=0；i
只需在deleteItem（e）中传递一个事件参数，现在进一步查看e.target元素并执行此元素的删除。我希望这能解决您的问题。试试这个。即Add item.innerHTML=itemText+“Delete item”；我在innerHTML中添加了您告诉我要添加的内容，但我应该在deleteItem（e）上写些什么呢函数？我对javascript不是很在行。你能不能用小提琴之类的东西来分享一些工作代码？我提供了一个代码片段，明确地说我假设变量
button
指的是有问题的按钮。是的，但是“button”只是一个字符串。OP怎么知道？他不是在学习吗？我不知道，Goog可能是ling？我不打算在这里写一个完整的JavaScript教程。但是很好，我将添加如何获取
按钮
元素。感谢您创建了一个全面且写得很好的答案，并为其他人付出了额外的努力，尤其是对于第一次使用该工具的人。
function registerClickHandler () {
    var x = document.querySelectorAll(".image");
    for(var i = 0; i < x.length; i++) {
       x[i].querySelector(".remove").onclick = function(){
           this.parentNode.parentNode.removeChild(this.parentNode);
    };
}