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(); 
    }

而且HTML:

<body onload="radio()"> 

    <div id="paraButton" align="left"> 


     <form><h3>Enter your Paragraph content here:</h3> 
<textarea cols="20" rows="10" id="usrinput">Enter your texts here...</textarea> 
     </form> 


<form id="one"><input type="button" value="Apply" onclick="writePara()"/></form> 
     <div id="updateDiv" name ="update"><h1>Space for Paragraph</h1>  </div> 

    </div> 

    <div id="radioButton"> 

     <h3>Type your radio button here:</h3> 
     <input type="text" name="option" id="option" value="Example 1" /> 
     </br></br> 
     <button id="AddButton">Add</button> 
     <button id="RemoveButton">Remove</button> 
     </br></br></br></br></br></br></br></br> 

     <div id="updateDivRadio"><h1>Space for Radio Button</h1></div> 
    </div> 
</body>

PS：在radio()功能很好地工作，這只是我有問題的一部分。

來源

2014-03-29 envyM6

這裏有一個[的jsfiddle（http://jsfiddle.net/TaQQ5/）與您提供的代碼 - 你介意加入一些代碼，使工作的例子，所以我們可以找出問題？ – kmoe

@kmoe感謝小提琴，但它沒有正常運行我的整個代碼的功能。例如，當我點擊「應用」時，它會在輸入區域的文本中創建一個新的段落，但在小提琴中沒有任何反應。 – envyM6

@kmoe [My Fiddle]（http://jsfiddle.net/nadz006/72ex5/show/）。 – envyM6

好的我得到它的工作與他人的幫助，所以決定在這裏分享... 改變button2.onclick到這個作品。

button2.onclick = 
(
function() 
{ 
    newParagraph.parentNode.removeChild(newParagraph); 
    button.parentNode.removeChild(button); 
    button2.parentNode.removeChild(button2); 
} 
);

來源

2014-03-31 11:45:09 envyM6

DOM創建的刪除按鈕無法正常工作

回答

相關問題