✨closing button [x]

browser ⟩ event ⟩ type ⟩ mouse ⟩ click ⟩ example ⟩ closing button

add a closing button [x] for every <div class="pane">.

💈範例

• replit ⟩ closing button , require ⟩ Node+ext

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

.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%);
}

🗺️ 圖表

👥 相關

• .insertAdjacentHTML()

📗 參考

• javascript.info ⟩ Add a Closing Button ⭐️

• Eloquent JS ⟩ Ch. 15: Event Handling ⟩ Mouse Clicks

📘 手冊

• Event ⟩ UIEvent ⟩ MouseEvent ⟩ click event

• elem.insertAdjacentHTML()