49 lines
1.1 KiB
HTML
49 lines
1.1 KiB
HTML
<!Doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Lista de la compra JAVASCRIPT</title>
|
|
|
|
<script>
|
|
|
|
function eliminar(elemento) {
|
|
// Utilizar remove
|
|
elemento.remove();
|
|
}
|
|
|
|
function anadir() {
|
|
let listaCompra = document.getElementById("listaCompra");
|
|
let nuevoItem = document.getElementById("anadir").value;
|
|
|
|
if (nuevoItem === "") {
|
|
alert("No has añadido nada");
|
|
} else {
|
|
let item = document.createElement("li");
|
|
item.textContent = nuevoItem;
|
|
item.addEventListener("dblclick", function() {
|
|
eliminar(item);
|
|
});
|
|
listaCompra.appendChild(item);
|
|
document.getElementById("anadir").value = "";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
|
|
<label>Mi lista de la compra:</label>
|
|
<input type="text" name="campo" id="anadir">
|
|
<input type="button" value="Añadir a la lista" onclick="anadir()">
|
|
|
|
<ul id="listaCompra"></ul>
|
|
|
|
<p>Nota: Puedes eliminar elementos de la lista haciendo doble click sobre ellos</p>
|
|
</div>
|
|
|
|
|
|
<br>
|
|
|
|
</body>
|
|
</html> |