删除按钮无法正常工作 (DOM)

Question

好的，这就是我想要做的... 创建一个删除按钮以及在创建段落时使用 DOM 进行编辑。但是删除按钮似乎总是删除第一段而不是删除相应的段落..这是我的代码：

Javascript:

 function writePara()
 {
    var comment = document.getElementById("usrinput").value;
    var newParagraph = document.createElement('p');
    newParagraph.textContent = comment;
    document.getElementById("updateDiv").appendChild(newParagraph);

    var button = document.createElement("button");
    var Btext=document.createTextNode("EDIT");
    button.appendChild(Btext);
    document.getElementById("updateDiv").appendChild(button);

    button.onclick = 
    (
        function() 
        {
    var edit = prompt("Type to edit", "");
    newParagraph.innerHTML = edit;
        }
    );
    var button2 = document.createElement("button");
    var Btext2=document.createTextNode("DELETE");
    button2.appendChild(Btext2);
    document.getElementById("updateDiv").appendChild(button2);
    button2.onclick = 
    (
        function ()
        {

    var items = document.querySelectorAll("#updateDiv p");
        if (items.length) 
    {
        var child = items[0];
        child.parentNode.removeChild(child);
    }
    button.parentNode.removeChild(button);
    button2.parentNode.removeChild(button2);
        }


    );
    addBr();
  }

各位有什么想法吗？

Answer 1

您已经在writePara 函数中引用了新段落，并且您已经在编辑处理程序中使用过一次，那么为什么不在删除处理程序中再次使用它呢？

button2.onclick = 
(
    function ()
    {
        newParagraph.parentNode.removeChild(newParagraph);
        button.parentNode.removeChild(button);
        button2.parentNode.removeChild(button2);
    }
);

它的工作原理如下：http://jsbin.com/nohud/1/edit。在输入中写一些东西，然后在输入之外单击几次以生成一些段落。

编辑：上面的代码使用了闭包。重要的是要了解每次调用 writePara 时，newParagraph 变量指向一个新的 DOM 元素，并且在同一函数中定义的每个单击事件处理程序都可以访问 newParagraph 变量中的特定元素。因此，每当调用编辑/删除处理程序时，newParagraph 就是在调用 writePara 时创建关联按钮的元素。

这里有一些代码解释得更清楚：

function init() {
    var name = "Mozilla"; // name is a local variable created by init
    function displayName() { // displayName() is the inner function, a closure
        alert (name); // displayName() uses variable declared in the parent function    
    }
    displayName();    
}
init();

取自这里：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures。更多内容在这里：How do JavaScript closures work?。

从那里newParagraph.parentNode 是包含新段落的容器，因此newParagraph.parentNode.removeChild(newParagraph) 只是从其容器中删除该特定元素。

Answer 2

这是因为你总是给 index[0] 以便它删除第一段如下所示

var child = items[0];

应该是

newParagraph.parentNode.removeChild(newParagraph);