> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/event/type/mouse/click/closing-button-x.md).

# closing button \[x]

[browser](/web/browser.md) ⟩ [event](/web/browser/event.md) ⟩ [type](/web/browser/event/type.md) ⟩ [mouse](/web/browser/event/type/mouse.md) ⟩ [click](/web/browser/event/type/mouse/click.md) ⟩ example ⟩ closing button

{% hint style="success" %}
add a closing button \[x] for every `<div class="pane">`.
{% endhint %}

{% tabs %}
{% tab title="💈範例" %}

* replit ⟩ [closing button](https://replit.com/@pegasusroe/closing-button-x#index.js) ,  require ⟩ [Node+ext](/web/browser/dom/type/node/+ext.md)

```javascript
const { log } = console

// ⭐️ import
import { $, $all } from './js/ext/Node_ext.js';        // 👔 Node + ext
// ---------------------------------------------------------------

// elements
const panes = $all('.pane');                // <div class="pane">

panes.forEach(pane => {
    
    // ⭐️ create "[x] buttons"
    pane.insertAdjacentHTML(
        "afterbegin", 
        '<div class="x-button">[x]</div>'
    );
    
    // ⭐️ <div class="x-button"> becomes `pane.firstChild`
    pane.firstChild.onclick = () => {
        pane.hidden = true;
    };
    
});

// show all panes again
$('#showAll').onclick = () => {
    panes.forEach(pane => pane.hidden = false);
};
```

📁 CSS

```css
.pane {
    position: relative;    /* ⭐️ new coord system */
}

.pane .x-button {
    position: absolute;    /* ⭐️ relative to .pane */
    top: 4px;
    right: 4px;
    color: orange;
    cursor: pointer;
    font-family: monospace;
}

.pane h3 {
    color: hsl(225 80% 80%);
}
```

{% endtab %}

{% tab title="🗺️ 圖表" %}
{% embed url="<https://replit.com/@pegasusroe/closing-button-x#index.js>" %}
{% endtab %}

{% tab title="👥 相關" %}

* [.insertAdjacentHTML()](/web/browser/dom/type/element/.insertadjacent.md)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] javascript.info ⟩ [Add a Closing Button](https://javascript.info/introduction-browser-events#add-a-closing-button)  ⭐️&#x20;
* [ ] Eloquent JS ⟩ [Ch. 15: Event Handling](https://eloquentjavascript.net/15_event.html) ⟩ [Mouse Clicks](https://eloquentjavascript.net/15_event.html#i_D5iwImkmyt)
  {% endtab %}

{% tab title="📘 手冊" %}

* [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) ⟩ [UIEvent](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ⟩ [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) ⟩ [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)
* [elem.insertAdjacentHTML()](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)
  {% endtab %}
  {% endtabs %}