Question

我的javascript出了问题。我想创建某种待办事项列表，但我无法弄清楚如何删除项目。

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

我在addItem函数

上有这个

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

这将是删除该项目的功能，但我不知道该放入什么内容......

function deleteItem() {

}

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

相反但是，我会使用事件委派：在列表中挂钩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的实例：

＆＃13;

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

＆＃13;

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

＆＃13;

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希望我将其添加得如此糟糕，以下是button（在设置item之后）的上下文中获取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);

}

希望有所帮助：）

使用javascript删除父元素

4 个答案:

编辑：