tengo el siguiente problema: Tengo un formulario que tiene 4 inputs, dos de ellos son para escribir, y los otros dos son dos botones, un botón es "+" y el otro "-". El objetivo es que al pulsar al botón "+" se crea otros 4 inputs, y si se dá al botón "-", se elimine esos 4 inputs.
Hasta ahora solo he podido pintar los inputs desde el primer div que tengo, los botones que se crean no tienen ningúna función. Necesito asociar el primer evento y que los elementos que crea, utilicen ese mismo evento. Necesito hacerlo solo en javaScript, por más que he mirado no encuentro la solución, os lo agradecería mucho
Os enseño lo que tengo:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Práctica a Entregar</title>
<meta charset="utf-8">
<script type="text/javascript" src="1.js"></script>
<link rel="stylesheet" type="text/css" href="practica1.css">
</head>
<body>
<h1>Solicitud de empleo</h1>
<div id="contenedor">
<form name="prueba" action="#" id="formulario">
<p>Formacion:</p>
<div class="test" id="primero">
<input type="text" id="year" size="2">
<input type="text" id="curso" size="50">
<input type="button" id="menos" value="-">
<input type="button" id="mas" value="+">
</div>
</form>
</div>
</body>
</html>
Archivo js:
document.addEventListener("DOMContentLoaded",main);
function main(){
function anadirCaja(){
var divPrimero = document.getElementById("primero");
var divResto = document.createElement("DIV");
divPrimero.append(divResto);
divResto.setAttribute("class", "test");
divResto.setAttribute("id", "primero");
var inputAnno = document.createElement("input");
var inputCurso = document.createElement("input");
var inputBotonMenos = document.createElement("input");
var inputBotonMas = document.createElement("input");
inputAnno.setAttribute("type","text");
inputAnno.setAttribute("id","year");
inputAnno.setAttribute("size","2");
inputCurso.setAttribute("type","text");
inputCurso.setAttribute("id","curso");
inputCurso.setAttribute("size","50");
inputBotonMenos.setAttribute("type","button");
inputBotonMenos.setAttribute("id","menos");
inputBotonMenos.setAttribute("value","-");
inputBotonMas.setAttribute("type","button");
inputBotonMas.setAttribute("id","mas");
inputBotonMas.setAttribute("value","+");
divResto.append(inputAnno);
divResto.append(inputCurso);
divResto.append(inputBotonMenos);
divResto.append(inputBotonMas);
}
var mas = document.getElementById("mas");
mas.addEventListener("click",anadirCaja);
var menos = document.getElementById("menos");
menos.addEventListener("click",quitarCaja);
}