Why do I have to double-click on my button to make the event work?

Is simple, i'm starting with javascript. I wrote down an example for the 'removeChild' method, with simple function that activates with a button. But, I have to double-click on it to make it works.

I guess that this could be solved using JQuery, but I just want to understand what's happening, and try to figure out what is javascript understanding.

This is my HTML:

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastChild;

  parent.removeChild(child);

}

<div id="demo">

  <p>Paragraph 1</p>

  <p>Paragraph 2</p>

  <p>Paragraph 3</p>

</div>

<button onClick="remove()">Erase last</button>

edited Jan 3 at 2:03

Tyler Roper

14.2k32142

asked Jan 3 at 2:01

Oscar Fuentes

133

add a comment |

Is simple, i'm starting with javascript. I wrote down an example for the 'removeChild' method, with simple function that activates with a button. But, I have to double-click on it to make it works.

I guess that this could be solved using JQuery, but I just want to understand what's happening, and try to figure out what is javascript understanding.

This is my HTML:

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastChild;

  parent.removeChild(child);

}

<div id="demo">

  <p>Paragraph 1</p>

  <p>Paragraph 2</p>

  <p>Paragraph 3</p>

</div>

<button onClick="remove()">Erase last</button>

edited Jan 3 at 2:03

Tyler Roper

14.2k32142

asked Jan 3 at 2:01

Oscar Fuentes

133

add a comment |

Is simple, i'm starting with javascript. I wrote down an example for the 'removeChild' method, with simple function that activates with a button. But, I have to double-click on it to make it works.

I guess that this could be solved using JQuery, but I just want to understand what's happening, and try to figure out what is javascript understanding.

This is my HTML:

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastChild;

  parent.removeChild(child);

}

<div id="demo">

  <p>Paragraph 1</p>

  <p>Paragraph 2</p>

  <p>Paragraph 3</p>

</div>

<button onClick="remove()">Erase last</button>

edited Jan 3 at 2:03

Tyler Roper

14.2k32142

asked Jan 3 at 2:01

Oscar Fuentes

133

Is simple, i'm starting with javascript. I wrote down an example for the 'removeChild' method, with simple function that activates with a button. But, I have to double-click on it to make it works.

I guess that this could be solved using JQuery, but I just want to understand what's happening, and try to figure out what is javascript understanding.

This is my HTML:

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastChild;

  parent.removeChild(child);

}

<div id="demo">

  <p>Paragraph 1</p>

  <p>Paragraph 2</p>

  <p>Paragraph 3</p>

</div>

<button onClick="remove()">Erase last</button>

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastChild;

  parent.removeChild(child);

}

<div id="demo">

  <p>Paragraph 1</p>

  <p>Paragraph 2</p>

  <p>Paragraph 3</p>

</div>

<button onClick="remove()">Erase last</button>

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastChild;

  parent.removeChild(child);

}

<div id="demo">

  <p>Paragraph 1</p>

  <p>Paragraph 2</p>

  <p>Paragraph 3</p>

</div>

<button onClick="remove()">Erase last</button>

javascript html

edited Jan 3 at 2:03

Tyler Roper

14.2k32142

asked Jan 3 at 2:01

Oscar Fuentes

133

edited Jan 3 at 2:03

Tyler Roper

14.2k32142

asked Jan 3 at 2:01

Oscar Fuentes

133

edited Jan 3 at 2:03

Tyler Roper

14.2k32142

edited Jan 3 at 2:03

Tyler Roper

14.2k32142

edited Jan 3 at 2:03

Tyler Roper

14.2k32142

asked Jan 3 at 2:01

Oscar Fuentes

133

asked Jan 3 at 2:01

Oscar Fuentes

133

asked Jan 3 at 2:01

Oscar Fuentes

133

add a comment |

2 Answers
2

active

oldest

votes

lastChild includes text nodes. Because you have a line-break after the last , your first click actually removes the line-break. The subsequent click removes the  element.

To demonstrate, take a look at this example, where I've simply removed the line-breaks from your HTML:

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastChild;

  parent.removeChild(child);

}

<div id="demo"><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p></div>

<button onClick="remove()">Erase last</button>

However, removing line-breaks from your HTML is hardly a practical solution!

Instead, replace lastChild with lastElementChild:

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastElementChild;

  parent.removeChild(child);

}

<div id="demo">

  <p>Paragraph 1</p>

  <p>Paragraph 2</p>

  <p>Paragraph 3</p>

</div>

<button onClick="remove()">Erase last</button>

edited Jan 3 at 2:12

answered Jan 3 at 2:07

Tyler Roper

14.2k32142

add a comment |

With parent.childNodes you can find all child nodes of the div

NodeList(6) [text, p, text, p, text, p]

Click every twice you can remove a p element.

Not double-click.

Reference link: https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

answered Jan 3 at 2:27

teddylee

212

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015449%2fwhy-do-i-have-to-double-click-on-my-button-to-make-the-event-work%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

lastChild includes text nodes. Because you have a line-break after the last , your first click actually removes the line-break. The subsequent click removes the  element.

To demonstrate, take a look at this example, where I've simply removed the line-breaks from your HTML:

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastChild;

  parent.removeChild(child);

}

<div id="demo"><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p></div>

<button onClick="remove()">Erase last</button>

However, removing line-breaks from your HTML is hardly a practical solution!

Instead, replace lastChild with lastElementChild:

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastElementChild;

  parent.removeChild(child);

}

<div id="demo">

  <p>Paragraph 1</p>

  <p>Paragraph 2</p>

  <p>Paragraph 3</p>

</div>

<button onClick="remove()">Erase last</button>

edited Jan 3 at 2:12

answered Jan 3 at 2:07

Tyler Roper

14.2k32142

add a comment |

lastChild includes text nodes. Because you have a line-break after the last , your first click actually removes the line-break. The subsequent click removes the  element.

To demonstrate, take a look at this example, where I've simply removed the line-breaks from your HTML:

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastChild;

  parent.removeChild(child);

}

<div id="demo"><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p></div>

<button onClick="remove()">Erase last</button>

However, removing line-breaks from your HTML is hardly a practical solution!

Instead, replace lastChild with lastElementChild:

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastElementChild;

  parent.removeChild(child);

}

<div id="demo">

  <p>Paragraph 1</p>

  <p>Paragraph 2</p>

  <p>Paragraph 3</p>

</div>

<button onClick="remove()">Erase last</button>

edited Jan 3 at 2:12

answered Jan 3 at 2:07

Tyler Roper

14.2k32142

add a comment |

lastChild includes text nodes. Because you have a line-break after the last , your first click actually removes the line-break. The subsequent click removes the  element.

To demonstrate, take a look at this example, where I've simply removed the line-breaks from your HTML:

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastChild;

  parent.removeChild(child);

}

<div id="demo"><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p></div>

<button onClick="remove()">Erase last</button>

However, removing line-breaks from your HTML is hardly a practical solution!

Instead, replace lastChild with lastElementChild:

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastElementChild;

  parent.removeChild(child);

}

<div id="demo">

  <p>Paragraph 1</p>

  <p>Paragraph 2</p>

  <p>Paragraph 3</p>

</div>

<button onClick="remove()">Erase last</button>

edited Jan 3 at 2:12

answered Jan 3 at 2:07

Tyler Roper

14.2k32142

lastChild includes text nodes. Because you have a line-break after the last , your first click actually removes the line-break. The subsequent click removes the  element.

To demonstrate, take a look at this example, where I've simply removed the line-breaks from your HTML:

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastChild;

  parent.removeChild(child);

}

<div id="demo"><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p></div>

<button onClick="remove()">Erase last</button>

However, removing line-breaks from your HTML is hardly a practical solution!

Instead, replace lastChild with lastElementChild:

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastElementChild;

  parent.removeChild(child);

}

<div id="demo">

  <p>Paragraph 1</p>

  <p>Paragraph 2</p>

  <p>Paragraph 3</p>

</div>

<button onClick="remove()">Erase last</button>

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastChild;

  parent.removeChild(child);

}

<div id="demo"><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p></div>

<button onClick="remove()">Erase last</button>

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastChild;

  parent.removeChild(child);

}

<div id="demo"><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p></div>

<button onClick="remove()">Erase last</button>

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastElementChild;

  parent.removeChild(child);

}

<div id="demo">

  <p>Paragraph 1</p>

  <p>Paragraph 2</p>

  <p>Paragraph 3</p>

</div>

<button onClick="remove()">Erase last</button>

function remove() {

  var parent = document.getElementById("demo");

  var child = parent.lastElementChild;

  parent.removeChild(child);

}

<div id="demo">

  <p>Paragraph 1</p>

  <p>Paragraph 2</p>

  <p>Paragraph 3</p>

</div>

<button onClick="remove()">Erase last</button>

edited Jan 3 at 2:12

answered Jan 3 at 2:07

Tyler Roper

14.2k32142

edited Jan 3 at 2:12

answered Jan 3 at 2:07

Tyler Roper

14.2k32142

answered Jan 3 at 2:07

Tyler Roper

14.2k32142

answered Jan 3 at 2:07

Tyler Roper

14.2k32142

add a comment |

With parent.childNodes you can find all child nodes of the div

NodeList(6) [text, p, text, p, text, p]

Click every twice you can remove a p element.

Not double-click.

Reference link: https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

answered Jan 3 at 2:27

teddylee

212

add a comment |

With parent.childNodes you can find all child nodes of the div

NodeList(6) [text, p, text, p, text, p]

Click every twice you can remove a p element.

Not double-click.

Reference link: https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

answered Jan 3 at 2:27

teddylee

212

add a comment |

With parent.childNodes you can find all child nodes of the div

NodeList(6) [text, p, text, p, text, p]

Click every twice you can remove a p element.

Not double-click.

Reference link: https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

answered Jan 3 at 2:27

teddylee

212

With parent.childNodes you can find all child nodes of the div

NodeList(6) [text, p, text, p, text, p]

Click every twice you can remove a p element.

Not double-click.

Reference link: https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

answered Jan 3 at 2:27

teddylee

212

answered Jan 3 at 2:27

teddylee

212

answered Jan 3 at 2:27

teddylee

212

answered Jan 3 at 2:27

teddylee

212

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk