Javascript 删除按钮工作不正常（DOM）

好的，这就是我想做的。。。创建段落时使用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();
  }

---

有什么想法吗？

这是因为你总是给索引[0]，所以它会删除第一段，如下所示

var child = items[0];

应该是

newParagraph.parentNode.removeChild(newParagraph);

---

您已经在

writePara

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

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

下面是它的工作原理：。在输入中写入一些内容，然后在输入之外单击几次以生成一些段落

编辑：上面的代码使用闭包。必须了解，每次调用

writePara

时，

newparation

变量都指向一个新的DOM元素，并且在同一函数中定义的每个单击事件处理程序都可以访问

newparagration

变量中的特定元素。因此，无论何时调用编辑/删除处理程序

newparation

都是在调用

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

它是从这里取的：。这里还有更多：

---

从那以后，

newparagration.parentNode

就是包含新段落的容器，所以

newparagration.parentNode.removeChild（newparagration）

只是从容器中删除了那个特定的元素。

我认为它必须处理这个位：

{var child=items[0]；child.parentNode.removeChild（child）；}

我知道！我该怎么做？所以它会删除相应的段落而不是第一段@Neelso it

var child=this.parentNode.removeChild（this）@尼利普@Neel感谢男人，它的工作原理如上所述，simich的回答更好@西米奇。。。。。作品谢谢！！！你能补充一些意见，以便我能更好地理解它吗？