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()功能工作正常,这只是我遇到问题的一个部分。

好的,

我在其他人的帮助下让它工作,所以决定在这里分享......将button2.onclick更改为此工作。

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

相关内容

  • 没有找到相关文章

最新更新