1

quería saber como podría hacer para limpiar los inputs de un nodeList siempre y cuando tengan la clase "div"

El nodeList en cuestión

Probé esto y muchas cosas más pero nada, no estaria encontrando la forma:

let nodoHijos = clon.childNodes;
nodoHijos.getElementsByTagName("div").querySelector("input").value = "";

Lo que tengo en el HTML es lo siguiente:

<div class="row clonar">
    <div class="col mb-2">
        <input class="form-control form-control-sm" id="input1" type="text" aria-label=".form-control-sm example" placeholder="Nombre y Apellido" name="NyA1" required>
    </div>
    <div class="col">
        <input class="form-control form-control-sm" id="input2" type="text" aria-label=".form-control-sm example" placeholder="Cohorte" name="Cohorte1" required>
        </div>
    <div class="col">
        <div class="input-group input-group-sm">
            <input class="form-control" id="exampleFormControlInput1" type="text" placeholder="Correo Institucional" name="CorreoInstitucional1" required>
            <span class="input-group-text" id="basic-addon2">@hotmail.com</span>
        </div>
    </div>
    <div class="col">
        <input class="form-control form-control-sm" id="inputGroupFile02" type="file" name="FotoAlumno1" required>
    </div>
</div>

Y el script es este:

<script>
    let agregar = document.getElementById("agregar");
    let contenido = document.getElementById("contenedor");

    agregar.addEventListener("click", e =>{
        e.preventDefault();
        let clonado = document.querySelector(".clonar"); // Seleccionamos lo que vamos a clonar
        let clon = clonado.cloneNode(true); // Ya clonado el nodo, osea el div

        let nodoHijos = clon.childNodes;
        // Obtener todos los inputs
        let inputs = nodoHijos.querySelectorAll('div input');
        // Recorrer para poner valor
        inputs.forEach(input => input.value = '');

        contenido.appendChild(inputs).classList.remove("clonar"); // Adjuntamos un hijo al final de todo
    })
</script>
2
  • Podrás subir el código html para hacer pruebas? Necesitas seleccionar y borrar los input dentro de las etiquetas div o dentro de otras etiquetas con clase "div" porque en tu código nunca seleccionas una clase. Si nos pasas el código será fácil poder ayudarte. el 10 mar. 2022 a las 2:20
  • Si, ya agregúe el codigo HTMLy el JS también por las dudas, gracias el 12 mar. 2022 a las 1:04

1 respuesta 1

1

Estás usando querySelector, que devuelve solo un nodo. Usa querySelectorAll() para obtener todos los que coincidan y, de paso, simplifica con un selector CSS que especifica que los input deben estar dentro de un div, eliminando la necesidad de getElementsByTagName().

Finalmente, recorre los inputs en un ciclo para poner el valor como cadena vacía:

// Obtener todos los inputs
let inputs = clon.querySelectorAll('div input');
// Recorrer para poner valor
inputs.forEach(input => input.value = '');
3
  • Me dice lo siguiente en la consola: Uncaught TypeError: nodoHijos.querySelectorAll is not a function el 12 mar. 2022 a las 0:56
  • @MarceloSanchez, cierto, .childNodes devuelve una colección y no se puede usar ahí .querySelectorAll(), basta con obtener los inputs directamente del elemento clonado. Revisa la respuesta, acabo de editarla.
    – Triby
    el 12 mar. 2022 a las 1:01
  • Me funcionó, muchas gracias :D el 13 mar. 2022 a las 15:16

Tu Respuesta

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

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