Skip to content

Make a single line of code-example easier to read and understand #42185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chrisdavidmills merged 5 commits into from
Dec 1, 2025
Merged

Make a single line of code-example easier to read and understand #42185

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c04a939
Make a single line of code-example easier to read and understand
youssef-el-atmani Dec 1, 2025
0454037
Fix a linting issue
youssef-el-atmani Dec 1, 2025
1037b86
Removing an ending coma to fix lintin issue
youssef-el-atmani Dec 1, 2025
7877586
Merge branch 'main' into patch-17
caugner Dec 1, 2025
cd870f7
Improve the clarity of a section about addEventListener()
youssef-el-atmani Dec 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,7 @@ To begin with, let's put together a basic function.
closeBtn.textContent = "x";
panel.appendChild(closeBtn);

closeBtn.addEventListener("click", () =>
panel.parentNode.removeChild(panel),
);
closeBtn.addEventListener("click", () => body.removeChild(panel));
```

This is quite a lot of code to go through, so we'll walk you through it bit by bit.
Expand Down Expand Up @@ -117,10 +115,10 @@ panel.appendChild(closeBtn);

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>`.
Briefly, the `addEventListener()` method can be called on any element on the page, and is usually passed two arguments: the name of an event and a function to run when the event occurs. In this case, the event name 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()", "removeChild()")}} method to specify that we want to remove a specific child element of the `<body>` element: in this case, the panel `<div>`.

```js
closeBtn.addEventListener("click", () => panel.parentNode.removeChild(panel));
closeBtn.addEventListener("click", () => body.removeChild(panel));
```

Basically, this whole block of code is generating a block of HTML that looks like so, and inserting it into the page:
Expand Down