*Te expliqué el código en él mismo, además con esto puedes agregar y eliminar cuantas tareas quieras,además este código te muestra un mensaje en consola de que eliminaste una tarea, y si intentas eliminar una tarea y no existe, también te mostrará un mensaje. *
PD: No mezcles el código Javascript ni CSS , dentro del html es MUY MALA PRACTICA.
var charged = false; // variable "FLAG" que controlará si el dom está cargado, flag se denomina porque funciona como un "controlador" para nosotros, ya que cuando esta este en true, significa que el documento cargó
window.addEventListener("DOMContentLoaded",() =>{charged = true;}); // Comprobamos si el documento está cargado.
var i = 0;
function Añadir() {
var div;
if(charged) div = document.getElementById("tareas"); // meteremos en un div con id tareas
i = i + 1;
var it = document.createElement("INPUT");
var c = document.createElement("INPUT");
var p = document.createElement('p');
c.setAttribute("type", "checkbox");
c.setAttribute("id", "cb");
it.setAttribute("type", "text");
it.setAttribute("size", "40");
it.setAttribute("id", i);
div.appendChild(it); // las coloco en el div
div.appendChild(c);
div.appendChild(p);
document.getElementById(i).placeholder = "Escribe tu tarea o deber que tengas que hacer";
}
var tareasEliminadas = 0; // cantidad de tareas eliminadas
function Quitar() {
var div;
if(charged) div = document.getElementById("tareas"); // el div
var inputs = document.getElementsByTagName("INPUT");
if(tareasEliminadas > inputs.length-1) {console.log("No tienes tareas creadas..");
return;
}
tareasEliminadas++; // sumo
inputs[inputs.length-tareasEliminadas].style.display = "none";
tareasEliminadas++; // sumo
inputs[inputs.length-tareasEliminadas].style.display = "none";
console.log("Tarea eliminada..");
}
#tareas{
width: 100%;
height: 100%;
}
#cb {
transform: scale(2);
cursor: pointer;
}
<html>
<head>
<meta charset="utf-8"/>
<title>
Listado
</title>
</head>
<body>
<p>
<button onclick="Añadir()">Añadir una nueva tarea</button>
<button onclick="Quitar()">Quitar la última tarea</button>
</p>
<div id="tareas"></div>
</body>
</html>