Delete Button not working properly (DOM)

Question

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

Any ideas guys?

I think it has to do something with this bit: `{ var child = items[0]; child.parentNode.removeChild(child); }` — envyM6, Mar 31 '14 at 11:03

Neel · Answer 1 · 2014-03-31T11:30:43.363

0

Its because you are always giving index[0] so that its deleting first paragraph as shown below

var child = items[0];

it should be

newParagraph.parentNode.removeChild(newParagraph);

edited Mar 31 '14 at 11:30

answered Mar 31 '14 at 11:05

Neel

11,625
3
43
61

I know! How do I get around that? So that it deletes the corresponding paragraph instead first paragraph? @Neel – envyM6 Mar 31 '14 at 11:06
so is it `var child = this.parentNode.removeChild(this);` ? @Neel – envyM6 Mar 31 '14 at 11:12
1

Yep... @Neel Thanks man It works as above also answer by simich is a lot better! – envyM6 Mar 31 '14 at 11:35

score 0 · Accepted Answer · edited May 23 '17 at 10:26

You already have a reference to the new paragraph in the writePara function and you already used it once in the edit handler, so why don't you use it again in the delete handler?

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

Here's how it works: http://jsbin.com/nohud/1/edit. Write something in the input and click outside of it a few times to generate some paragraphs.

Edit: The code above utilizes closures. It is important to understand that each time writePara is called, the newParagraph variable points to a new DOM element and each click event handler defined in the same function has access to that specific element in the newParagraph variable. So whenever the edit/delete handlers are called newParagraph is the element with which the associated buttons have been created when writePara has been called.

Here's some code that explains that clearer that I do:

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

It is taken from here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures. More also here: How do JavaScript closures work?.

From there on newParagraph.parentNode is the container containing the new paragraph, so newParagraph.parentNode.removeChild(newParagraph) just removes that specific element from its container.

@simich..... Works!!!! Thanks a lot!!! Can you add some comments please so that i can understand it better? — envyM6, Mar 31 '14 at 11:29

Delete Button not working properly (DOM)

2 Answers2