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

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

var child = items[0];

应该是

newParagraph.parentNode.removeChild(newParagraph);

Answer 2

您已经在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元素，并且在同一个函数中定义的每个click事件处理程序都可以访问{{1}中的特定元素变量。因此，每当调用编辑/删除处理程序时，newParagraph是在调用newParagraph时创建关联按钮的元素。

以下是一些解释我更清楚的代码：

writePara

从这里开始：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures。此处还有更多信息：How do JavaScript closures work?。

从那里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();是包含新段落的容器，因此newParagraph.parentNode只是从容器中删除该特定元素。

删除按钮无法正常工作（DOM）

2 个答案: