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

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

任何想法的家伙？

来源

2014-03-31 envyM6

我认为它必须采取这一点： '{ var child = items [0]; child.parentNode.removeChild（child）; }' – envyM6

你已经在为新的段落参考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变量中的特定元素。因此，无论何时调用编辑/删除处理程序，当调用writePara时，newParagraph就是创建相关按钮的元素。

下面是一些代码，解释清晰的，我这样做：

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)只是从其容器中移除该特定元素。

来源

2014-03-31 11:18:14 simich

@simich .....作品!!!!非常感谢！！！你可以添加一些评论，让我可以更好地理解它吗？ – envyM6

我更新了我的答案。希望现在更清楚。 – simich

你砸了@simich 不能更清楚!!!再次感谢好友！ – envyM6

它，因为你总是给指数[0]，以便其删除第一段如下图所示

var child = items[0];

应该

newParagraph.parentNode.removeChild(newParagraph);

来源

2014-03-31 11:05:18 Neel

我知道！我该如何解决这个问题？为了它删除相应的段落而不是第一段？ @Neel – envyM6

更新可以试试@ envyM6 – Neel

所以它是'var child = this.parentNode.removeChild（this）;'？ @Neel – envyM6

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

回答

相关问题