GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing javascript.info — Add a closing button

back to the lesson

Add a closing button

importance: 5

There’s a list of messages.

Use JavaScript to add a closing button to the right-upper corner of each message.

The result should look like this:

Open a sandbox for the task.

To add the button we can use either position:absolute (and make the pane position:relative) or float:right. The float:right has the benefit that the button never overlaps the text, but position:absolute gives more freedom. So the choice is yours.

Then for each pane the code can be like:

pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');

Then the <button> becomes pane.firstChild, so we can add a handler to it like this:

pane.firstChild.onclick = () => pane.remove();

Open the solution in a sandbox.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.