有人可以解释一下我的函数deleteButton（this）吗？

Question

以下链接指向我的所有代码：http://codepen.io/stevengangano/full/LGvRdq/

我的问题与我的deleteButton函数有关。我很难理解这个概念。

我为删除按钮创建了一个名为deleteButton（item）的函数。我只是想知道“item”和“parentNode”在变量remove中表示什么？哪一个是<ul>，哪一个是<li>？

将不胜感激。谢谢！

Answer 1

  

removeButton附加到this。 item.parentNode表示当前节点，它是按钮本身。

li将只是按钮的父级remove元素。 li变量包含此remove.parentNode元素。

再次li将返回ul元素的Bower元素的父节点。

paretNode.removeChild 从DOM中删除子节点

所以在这种情况下， UL_ELEMENT.removeChild（LI_ELEMENT）;

Answer 2

function deleteButton(item) {
    var remove = item.parentNode;
    remove.parentNode.removeChild(remove);
}

代码中的

（非现场发布）很长

function deleteButton(item) {
    item.parentNode.parentNode.removeChild(item.parentNode); 
}

从祖父节点的子节点列表中删除所单击项的父节点。删除按钮的父节点在代码中为listItem，这意味着将删除LI项。

在非现场发布的代码（bad practice™）中，删除功能定义为

removeButton.setAttribute('onclick', 'deleteButton(this);');

非常非常非常有趣。它建议在 HTML解析完成后使用文本设置onclick属性，使文本被解析为javascript函数的源，该函数成为属性值。好吧，所以一个setter可以做到这一点 - 但onEvent setter这样做对我来说是新闻。测试表明它是真的。

所以答案是设置带有文本的节点的onclick属性将文本编译为函数对象，将函数对象作为onclick属性值附加，当通过单击提供调用时，将被点击的节点作为{{ 1}} onclick处理程序的对象。如果调用的函数删除了单击对象的父节点，则在这种情况下会删除LI元素。