Make a single line of code-example easier to read and understand #42185
Conversation
For learners that never learned DOM, I guess `body.removeChild(panel)` is clearer than `panel.parentNode.removeChild(panel)`. And I guess it fits better with the previous line of code: `body.appendChild(panel)`.
youssef-el-atmani
requested review from
estelle
and removed request for
a team
github-actions
bot
added
Content:Learn
github-actions
bot
added
size/s
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md
Outdated
Show resolved
Hide resolved
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
|
||
| Finally, we call {{domxref("EventTarget/addEventListener", "addEventListener()")}} to add a function that will be called when the user clicks the "close" button. The code will delete the whole panel from the page — to close the message box. | ||
|
|
||
| Briefly, the `addEventListener()` method is provided by the button (or in fact, any element on the page) that can be passed a function and the name of an event. In this case, the name of the event is 'click', meaning that when the user clicks the button, the function will run. You'll learn a lot more about events in our [events article](/en-US/docs/Learn_web_development/Core/Scripting/Events). The line inside the function uses the {{domxref("Node.removeChild()")}} DOM API function to specify that we want to remove a specific child element of the HTML element — in this case, the panel `<div>`. |
There was a problem hiding this comment.
Hi @chrisdavidmills, I hope I am not over-calling you.
That sentence:
Briefly, the addEventListener() method is provided by the button (or in fact, any element on the page) that can be passed a function and the name of an event. In this case, the name of the event is 'click', meaning that when the user clicks the button, the function will run.
Looks a bit awkward to me.
Rephrasing it is outside of my scope. And if you think it can use some enhancement, please give it a shot.
|
Preview URLs Flaws (1)URL:
(comment last updated: 2025-12-01 16:32:41) |
chrisdavidmills
left a comment
chrisdavidmills
left a comment
There was a problem hiding this comment.
Thanks, @youssef-el-atmani!
This is quite interesting — I think I used panel.parentNode.removeChild(panel) as this is what we were forced to use before removeChild()/remove() were available. But I don't think I wrote it that long ago ;-)
In any case, yes, removeChild() is a better, more intuitive option.
I've got a couple of comments for you to look through.
files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md
Outdated
Show resolved
Hide resolved
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
chrisdavidmills
left a comment
chrisdavidmills
left a comment
There was a problem hiding this comment.
@youssef-el-atmani awesome, I think this one is ready to go now. Approving.
Thanks again.
3 participants
For learners that never learned DOM, I guess
body.removeChild(panel)is clearer thanpanel.parentNode.removeChild(panel).And I think it fits better with the previous line of code:
body.appendChild(panel).Description
Motivation
Additional details
Related issues and pull requests