Tengo un formulario en el que ingreso el número de elemento, luego el texto, luego el tipo div o section y hago clic en crear. Debo eliminar el div o sección anterior y crear uno nuevo.
/*get the number of element the text and the type*/ let element = document.querySelector("[name='elements']"); let text = document.querySelector("[name='texts']"); let type = document.querySelector("[name='type']"); let result = document.querySelector(".results"); document.forms[0].onsubmit = function (e) { let validElement = false; let validText = false; let validType = false; document.querySelectorAll(".results .box").forEach((box) => box.remove()); if (element.value !== "" && text.value !== "" && type.value !== "" && element.value > 0) { for (let i = 0; i < element.value; i++) { myBox = document.createElement(type.value); myBox.className = "box"; myBox.id = `id-${i+1}`; myBox.title = "Element"; myText = document.createTextNode(text.value); myBox.appendChild(myText); result.appendChild(myBox); } validElement = true; validText = true; validType = true; } if (validElement === false || validText === false || validType === false) { e.preventDefault(); } }; <form action=""> <input type="number" name="elements" class="input" placeholder="Number Of Elements" /> <input type="text" name="texts" class="input" placeholder="Elements Text" /> <select name="type" class="input"> <option value="Div">Div</option> <option value="Section">Section</option> </select> <input type="submit" name="create" value="Create" /> </form> <div class="results"></div>El problema es que el div o la sección aparecen pero luego desaparecen rápidamente. Estoy comprobando si el campo está vacío y si el número del elemento de campo es > 0, entonces creo el elemento que debería aparecer en el resultado div.
Como puedó resolver esté problema
El problema con su código es que no está evitando que <form> actualice la página.
if (validElement === false || validText === false || validType === false) { e.preventDefault(); } Utiliza la declaración if anterior para evitar el comportamiento predeterminado de <form> , pero establece todas esas variables en true después de crear sus elementos.
validElement = true; validText = true; validType = true;Entonces, su secuencia de comandos básicamente crea los elementos y luego el formulario actualiza la página.
Moviendo e.preventDefault(); fuera de su bloque if solucionaría su problema inmediato.
Yo personalmente llamaría a e.preventDefault(); independientemente de si los usuarios ingresan datos válidos, ya que una actualización de la página parece innecesaria en cualquier caso.
En cuanto a cómo borrar su div de resultados, aquí hay una publicación elaborada que describe varias formas de hacerlo.
/*get the number of element the text and the type*/ let element = document.querySelector("[name='elements']"); let text = document.querySelector("[name='texts']"); let type = document.querySelector("[name='type']"); let result = document.querySelector(".results"); document.forms[0].onsubmit = function (e) { let validElement = false; let validText = false; let validType = false; document.querySelectorAll(".results .box").forEach((box) => box.remove()); if (element.value !== "" && text.value !== "" && type.value !== "" && element.value > 0) { // Clear the Results Container while (result.firstChild) { result.removeChild(result.lastChild); } // Repopulate the Results Container for (let i = 0; i < element.value; i++) { myBox = document.createElement(type.value); myBox.className = "box"; myBox.id = `id-${i+1}`; myBox.title = "Element"; myText = document.createTextNode(text.value); myBox.appendChild(myText); result.appendChild(myBox); } validElement = true; validText = true; validType = true; } e.preventDefault(); }; <form action=""> <input type="number" name="elements" class="input" placeholder="Number Of Elements" /> <input type="text" name="texts" class="input" placeholder="Elements Text" /> <select name="type" class="input"> <option value="Div">Div</option> <option value="Section">Section</option> </select> <input type="submit" name="create" value="Create" /> </form> <div class="results"></div>