使用 javascript 删除父元素

Question

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

创建项目时，它会使用删除按钮添加到列表中，但我不知道如何才能让项目在单击按钮时自行删除。

我在 addItem 函数上有这个

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

这应该是删除项目的功能，但我不知道里面放什么...

function deleteItem() {

}

Answer 1

您必须使用 removeChild.
从那个父元素中删除父元素假设 button 指的是您的按钮元素：

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

所以要使您的按钮可点击。你可能想做类似

的事情

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

编辑：

由于 Samuel Liew 非常想让我添加它，下面是从 item 的上下文中获取 button 元素的方法（在设置 innerHTML 之后）：

var buttons = item.getElementsByTagName('button');
var button = buttons[buttons.length - 1]; // Just in case there is more than one button

综合起来：

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);

Answer 2

您有两个选择：

您可以将其作为处理程序直接附加到按钮，然后使用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);
}

相反， 不过，我会使用事件委托：在列表上挂钩 click，并且 if 点击通过这些删除按钮之一，然后处理它：您添加列表项和按钮的代码将保持不变。在一个地方，你会得到这个：

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

和 deleteItem 看起来像这样：

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 list, item, n;

// Get the list, add a handler to it
list = document.getElementById("the-list");
list.addEventListener("click", deleteItem, false);

// Add items to it; you can do this at any time
for (n = 1; n <= 10; ++n) {
  item = document.createElement("li");
  item.innerHTML = "Item #" + n + "<button class='delete'>Delete item</button>";
  list.appendChild(item);
}

// Handle clicks that might come through the delete button
function deleteItem(e) {
  var btn = e.target;
  while (btn && (btn.tagName != "BUTTON" || !/\bdelete\b/.test(btn.className))) {
    btn = btn.parentNode;
    if (btn === this) {
      btn = null;
    }
  }
  if (btn) {
    this.removeChild(btn.parentNode);
  }
}

<ul id="the-list"></ul>

Answer 3

您还可以参考这个更简单的解决方案：例如，图库;
// ............................................... .

<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);

}

希望对您有所帮助:)

Answer 4

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);
    };
}

使用 javascript 删除父元素

Delete parent element with javascript

javascript

element

parent

编辑：