使用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

你有几个选择：

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

2. 取而代之的是，虽然，我会使用事件委派：挂钩click就行了， 如果点击通过这些删除按钮中的一个传递，处理它，然后：您的代码添加列表项和按钮将保持不变。 在一个地方，你有这个：

    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 2

您必须使用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 3

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

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

}

希望能帮助到你 ：）