使用JavaScript删除父元素

Question

我正在遇到 JavaScript 的问题。我想要创建一种待办事项清单，但是我不知道如何删除其中的项目。

当创建一个项目时，它会在列表中加上一个删除按钮，但是我不知道当点击该按钮时，应该如何使其自行删除。

我在 addItem 函数中有以下代码：

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

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

function deleteItem() {

}

- Roy Morin Kat

---

只需要在deleteItem(e)中传入事件参数，然后查看e.target元素并执行删除操作。我希望这能解决你的问题。请尝试添加：item.innerHTML = itemText + "<button class='delete' onClick='deleteItem(e)'>删除项目</button>"; - maddy

我在innerHTML上添加了你告诉我的内容，但是在deleteItem(e)函数中应该写什么？我不太擅长JavaScript.. - Roy Morin Kat

你可以分享一些在Fiddle或其他平台上工作的代码吗？ - maddy

Answer 1

你有几个选择：

1. You could attach it as a handler directly to the button, then use this.parentNode to access the parent element. To actually remove it, you'd probably want to go one step higher up the hierarchy (DOM4 defines a remove method on elements, but it may not be supported by older browsers). That would look like this:

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

2. Instead of that, though, I'd use event delegation: Hook click on the list, and if the click passed through one of these delete buttons, handle it then: Your code for adding the list item and button would be unchanged. In one place, you'd have this:

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

   and deleteItem would look like this:

   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>

- T.J. Crowder

---

感谢您创建了一份全面且写得很好的答案，并为他人付出了额外的努力，特别是对于第一次使用SO的人。 - Samuel Liew

Answer 2

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

- Khine S Z

Answer 3

你需要使用 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);

- Siguza

---

我提供了一个片段，并明确表示我假设变量 button 指的是所讨论的按钮。 - Siguza

是的，但 'button' 只是一个字符串。OP 怎么知道呢？他不是在尝试学习吗？ - Samuel Liew

我不知道，也许可以通过谷歌搜索？我不会在这里写整个JavaScript教程。但好吧，我会添加如何获取“button”元素的内容。 - Siguza

Answer 4

你也可以参考这个更简单的解决方案： 例如，对于一个图库；
//.................................................

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

}

希望能有所帮助 :)

- steven7mwesigwa