刪除按鈕無法正常工作（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）

回答

相關問題