Desde un array vacío se crea un div con tres input.
let array = [];
if (array.length == 0) {
createElements();
}
function createElements() {
let div = document.createElement('div');
div.setAttribute('class', 'content');
div.style.backgroundColor = 'red';
div.style.width = '500px';
div.style.height = '50px';
document.body.append(div);
let Finp = document.createElement('input');
Finp.setAttribute('class', 'F-uno');
let Sinp = document.createElement('input');
Sinp.setAttribute('class', 'S-dos');
let Tinp = document.createElement('input');
Tinp.setAttribute('class', 'T-tres');
div.append(Finp, Sinp, Tinp);
Finp.addEventListener('change', (e) => {
if (Finp.value == '' && Sinp.value == '' && Tinp.value == '' && document.querySelectorAll('.content').length > 1) {
div.remove();
} else if (Finp.value != '' /*&& checkVacuum == 'true'*/ ) {
createElements();
}
});
Sinp.addEventListener('change', (e) => {
if (Sinp.value == '' && Finp.value == '' && Tinp.value == '' && document.querySelectorAll('.content').length > 1) {
div.remove();
}
});
Tinp.addEventListener('change', (e) => {
if (Tinp.value == '' && Sinp.value == '' && Finp.value == '' && document.querySelectorAll('.content').length > 1) {
div.remove();
}
});
}
El caso es que, necesito hacer lo siguiente (mal reflejado en los eventos de los input):
- Si el valor del primer input de un div, es cambiado (event change), tiene que crear otro div con tres input abajo del todo. (Yo lo hago activando la función createElements())
- Si el ultimo div de todos, tiene los valores input vacíos, no se pueden crear más divs debajo.
- Si borras el valor de los 3 input de un div, dicho div se borrará del DOM (eso está hecho)
Con estas tres premisas, consigo hacer la primera y la última, pero la segunda me trae un problema de lógica severo para lo que es mi cabecita pensante.
Intenté solventarlo con la función checkVacuum():
function checkVacuum(){
let elm = document.querySelectorAll('.content');
let n = elm.length-1;
if(elm[n].querySelectorAll('input')[0].value == '' && elm[n].querySelectorAll('input')[1].value == '' && elm[n].querySelectorAll('input')[2].value == ''){
return true;
}
}
Pero hace que, como el primer div de todos tiene los 3 input vacíos, y al ser el primero es el ultimo ya que es el único, y no se añaden más input.
¿Cómo podría hacerlo? No se me ocurre nada. Lo peor es que sabría hacerlo sintácticamente pero no morfológicamente