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

}

希望能幫助到你 ：）