0

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);
}

4 respuestas 4

1

Esto es lo que buscas:

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>

En tu archivo js pon esto:

var contador = 1;

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"+contador);         
        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"+contador);
        inputBotonMenos.setAttribute("value","-");
        inputBotonMas.setAttribute("type","button");
        inputBotonMas.setAttribute("id","mas"+contador);
        inputBotonMas.setAttribute("value","+");
        inputBotonMas.addEventListener("click", anadirCaja);
        inputBotonMenos.addEventListener("click",quitarCaja);
        divResto.append(inputAnno);
        divResto.append(inputCurso);
        divResto.append(inputBotonMenos);
        divResto.append(inputBotonMas);
        contador++;

    }

    function quitarCaja(e){

        var evento = e.target;  
        var identificador = evento.id;  
        identificador = identificador.replace("menos", "primero");
        var caja = document.getElementById(identificador);

        document.getElementById("primero").removeChild(caja);
    }

    var mas = document.getElementById("mas");
    mas.addEventListener("click",anadirCaja);
    var menos = document.getElementById("menos"+contador);
    menos.addEventListener("click",quitarCaja);
}
2
  • MUCHASSSS GRACIASSSSSS, de verdad!!! casi lloro de la alegria al ver que me funcionaba, gracias, gracias de corazon!!!
    – Sonia
    Commented el 10 nov. 2017 a las 8:11
  • Jajaja de nada, un saludo!
    – Rddevelop
    Commented el 10 nov. 2017 a las 8:32
0

prueba con esto, lo que tienes se metió dentro de un for y la eliminación de cajas se hizo con el las child

document.addEventListener("DOMContentLoaded",main());
function main(){
    var mas = document.getElementById("mas");
    mas.addEventListener("click",anadirCaja);
    var menos = document.getElementById("menos");
    menos.addEventListener("click", eliminarCaja)

}

function anadirCaja(){
    for(var i = 0; i < 4; i++){
        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);
    }
}

function eliminarCaja() {
    var padre = document.getElementById("primero");
  for(var i = 0; i < 4; i++){
    padre.removeChild(padre.lastChild);
   }
}
0

Utiliza cloneNode de javascript para agregar elementos y si quieres eliminarlos usa removeChild.

function main(){

    function anadirCaja(){
        var clon = document.getElementById('primero').cloneNode(true);
        var padre = document.getElementById("formulario");
        padre.appendChild(clon);
    }

    function quitarCaja(){
        var padre = document.getElementById("formulario");
        padre.removeChild(padre.lastChild);
    }

    document.getElementById("mas").addEventListener("click", anadirCaja);
    document.getElementById("menos").addEventListener("click", quitarCaja);
}
-1

te recomiendo que utilices jquery, te facilita las cosas. Lo que necesitas puedes hacer de la siguiente manera:

$('#ID1, #ID2').on('click', function(){ 
   ///TODO: Hacer algo
});

Esa función va se ejecutado cuando le das click a los objetos con esos ID's.

Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.