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

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>

P.S：radio()函数工作正常，这只是我遇到问题的一段。

Answer 1

好的，我得到了其他人的帮助，所以决定在这里分享...... 将button2.onclick更改为此作品。

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

DOM创建的删除按钮无法正常工作

1 个答案: