Кнопка удаления не работает должным образом (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

Его, потому что вы всегда дает индекс [0] так, что его удаление первого абзаца, как показано ниже

var child = items[0]; 

должно быть

newParagraph.parentNode.removeChild(newParagraph);