返回課程

新增一個關閉按鈕

重要性:5

有一串訊息。

使用 JavaScript 為每則訊息的右上角新增一個關閉按鈕。

結果應如下所示

開啟沙盒進行此任務。

若要新增按鈕,我們可以使用 position:absolute(並將窗格設為 position:relative)或 float:rightfloat:right 的好處是按鈕絕不會重疊到文字,但 position:absolute 提供了更大的自由度。因此,選擇權在於你。

然後,對於每個窗格,程式碼可以像這樣

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

然後,<button> 會變成 pane.firstChild,因此我們可以像這樣為其新增一個處理常式

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

在沙盒中開啟解法。