Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<ul> <li><a href="#">položka 1</a><span class="remove">×</span></li> <li><a href="#">položka 2</a><span class="remove">×</span></li> <li><a href="#">položka 3</a><span class="remove">×</span></li> <li><a href="#">položka 4</a><span class="remove">×</span></li> </ul>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 1.3em; position: relative; } .confirmation { background-color: pink; position: absolute; padding: 0 0.4em 0.1em; display: none; cursor: pointer; font-size: 0.9em; } .confirmation.visible { display: inline-block; } ul {} li { list-style-type: none; margin: 1em 0; } a { text-decoration: none; color: maroon; background-color: beige; padding: 0 1em 0.1em; } .remove { background-color: beige; margin-left: 0.4em; padding: 0 0.4em; cursor: pointer; }
CSS
Autoformát
CSS reset
Až na konci
(function (){ var confirmationElement = document.createElement("span"); var elementForRemoval; confirmationElement.className = "confirmation"; confirmationElement.appendChild(document.createTextNode("Odstranit položku (zrušit: Escape)")); confirmationElement.addEventListener("click", function (event) { elementForRemoval.parentNode.removeChild(elementForRemoval); confirmationElement.className = confirmationElement.className.replace(/ visible/, ''); }); document.body.appendChild(confirmationElement); function removeButtonClicked(event) { var spX = parseInt(event.target.getBoundingClientRect().right); var spY = event.target.offsetTop; elementForRemoval = event.target.parentNode; confirmationElement.style.cssText = "top: " + spY + "px; left: " + spX + "px"; confirmationElement.className += " visible"; } var removeButtons = document.getElementsByClassName("remove"); for(var i=0; i< removeButtons.length; i++) { removeButtons[i].addEventListener("click", removeButtonClicked); } document.body.addEventListener("keydown", function(event) { if (event.key == "Escape" && confirmationElement.className.indexOf('visible') !== -1) { confirmationElement.className = confirmationElement.className.replace(/ visible/, ''); } }); })()
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>