he tenido un problema y es que quiero tratar de crear una app que pueda agregar y eliminar inputs, que cuando no halla inputs salte un alert para que agreguen mas, cuando halla un solo alert, de un mensaje de confirmación en la pantalla, y en caso de ser "si", lo elimine y en caso de ser "no", lo anule. el problema esta en que al crear mas de un input y eliminar todos hasta que quede solo uno, ese ultimo nunca se eliminara, saltando un error.
var caja = document.getElementById("caja");
var input;
var boton = document.getElementById("btn");
var borrar = document.getElementById("btn2");
var guardar = document.getElementById("btn3");
function crearinput(){
input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("id", "input");
caja.appendChild(input);
}
function removerinput(event){
if (caja.childElementCount <= 0){
alert("porfavor agrega uno o mas elementos")
}
else if (caja.childElementCount > 1){
input = document.getElementById("input");
caja.removeChild(input);
}
else if (caja.childElementCount === 1 ){
var alerta = confirm("Estas a punto de eliminar tu ultimo elemento ¿Estas seguro?");
if (alerta == true){
caja.removeChild(input);
alert("Formato limpio");
}
}
}
function guardar(){
localStorage.setAttribute("valores", input)
}
boton.addEventListener("click", crearinput);
borrar.addEventListener("click", removerinput);
guardar.addEventListener("click", guardar);
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="lagranestafa.css">
<html>
<head>
<title>LaGranEstafa</title>
</head>
<body>
<div>
<div id="caja">
</div>
<br>
<input type="button" name="" id="btn" value="Agregar Valor">
<input type="button" name="" id="btn2" value="Remover Valor">
<input type="button" name="" id="btn3" value="Guardar">
</div>
<script type="text/javascript" src="lagranestafa.js"></script>
</body>
</html>