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
<title>Přidání položky JavaScriptem</title> <h1>Přidání položky JavaScriptem</h1> <form> <div class="polozky" id="polozky"> <div class="polozka" id="sablona"> <label>Jméno: <input type="text" name="policko1[]" placeholder="Zadejte jméno"></label> <label>Věk: <input type="number" name="policko2[]" value="20"></label> <label>VIP: <input type="checkbox" name="checkbox[]"></label> <button class="odebrat" onclick="odebrat(this)">× Odebrat</button> </div> </div> <button type="button" onclick="pridatPole()">+ Přidat</button> </form>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.polozka:first-child .odebrat { /* První tlačítko můžeme skrýt display: none; */ }
CSS
Autoformát
CSS reset
Až na konci
var prvniPolozka = document.getElementById('sablona'); var sablona = prvniPolozka.cloneNode(true); function pridatPole() { var kopie = sablona.cloneNode(true); document.getElementById('polozky').appendChild(kopie); kopie.getElementsByTagName("input")[0].focus(); } function odebrat(el) { var polozka = el.parentNode; polozka.parentNode.removeChild(polozka); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>