DOM created Delete Button not working properly

StackOverflow https://stackoverflow.com/questions/22732451

Вопрос

Ok here is what I was trying to do... Create a delete button along with edit by using DOM while creating a paragraph. But delete button always seems to be deleting first paragraph instead of deleting the corresponding paragraph.. here's my code:

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

And the 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: the radio() function is working fine this is just a segment that I'm having problem with.

Это было полезно?

Решение

Ok I got it working with the help of others so decided to share here... Changing button2.onclick to this works.

 button2.onclick = 
 (
 function ()
 {
    newParagraph.parentNode.removeChild(newParagraph);
    button.parentNode.removeChild(button);
    button2.parentNode.removeChild(button2);
 }
 );
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top