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

Delete Button not working properly (DOM)

本文关键字：工作 DOM 常工作 按钮 删除      更新时间：2023-09-26

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

伙计们有什么想法吗？

您已经在 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。更多内容也在这里：JavaScript闭包如何工作？。

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

这是因为您总是给出索引[0]，以便其删除第一段，如下所示

var child = items[0];

它应该是

newParagraph.parentNode.removeChild(newParagraph);
相关文章：