삭제 단추가 제대로 작동하지 않음 (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);