1

Estou fazendo um pequeno programa em javascript para gerar uma tabuada. Para evitar que ocorra duplicatas, eu coloco um pequeno trecho de código para limpar a lista antes de gerar a tabuada

 let numero = window.document.getElementById('numero');
    if (numero.value.length != 0) {
        let tabuada = window.document.getElementById('lista');
        let itens = window.document.getElementsByTagName('li');
        for (let i = 0; i <= 10; i++) {
            tabuada.removeChild(itens[i]);
        }

Entretanto, a lista não é gerada se mantenho esse código. Aqui está o código completo:

let numero = window.document.getElementById('numero');
if (numero.value.length != 0) {
    let tabuada = window.document.getElementById('lista');
    let itens = window.document.getElementsByTagName('li');
    for (let i = 0; i <= 10; i++) {
        tabuada.removeChild(itens[i]);
    }
    let novo = window.document.createElement("li");
    tabuada.appendChild(novo);
    let section = window.document.getElementById('section');
    section.style.height = "auto";
    for (let i = 0; i <= 10; i++) {
        let novo = window.document.createElement("li");
        let txtnovo = window.document.createTextNode(`${Number(numero.value)}x${i} = ${Number(numero.value) * i}`);
        novo.appendChild(txtnovo);
        tabuada.appendChild(novo);
    }
}

2 Respostas 2

1

document.getElementById('btnGerar').addEventListener('click', () => {
	let numero = window.document.getElementById('numero');
	
	if (numero.value.length === 0) {
		return;
	}
	
	let tabuada = window.document.getElementById('lista');
	while(tabuada.children.length > 0) {
		tabuada.removeChild(tabuada.children[0]);
	}
	
	let novo = window.document.createElement("li");
	tabuada.appendChild(novo);

	for (let i = 0; i <= 10; i++) {
		let novo = window.document.createElement("li");
		let txtnovo = window.document.createTextNode(`${Number(numero.value)}x${i} = ${Number(numero.value) * i}`);
		novo.appendChild(txtnovo);
		tabuada.appendChild(novo);
	}
});
<input id="numero" value="3" />
<input type="button" value="gerar" id="btnGerar" />
<ul id="lista"></ul>

3
  • Funcionou. Mas o seguinte trecho de código: while(tabuada.children.length > 0) { tabuada.removeChild(tabuada.children[0]); } eu não entendi bem. Pq a remoção acontece sempre na primeira posição dos filhos de "tabuada"? O java script realoca os restantes automáticamente? Commented 13/02/2020 às 13:03
  • @Matheus10772 Este trecho que você citou é para remover os <li> dentro do <ul>. Imagine que o <ul> tenha 3 <li>, logo seu children.length será igual a 3. Ao remover o children[0] o length será igual a 2. Depois removemos novamente o children[0] e o length passará a ser 1 e assim por diante até que não haja mais <li> dentro do <ul>. Funciona como uma pilha de papel, você sempre vai removendo o primeiro papel da pilha até que não haja mais nenhum. Commented 13/02/2020 às 13:39
  • Obrigado !!! :D Commented 13/02/2020 às 14:32
1

Se você tem uma lista:

<ul id="lista">
   <li></li>
   <li></li>
   <li></li>
</ul>

Para remover os elementos da lista (todos os <li>) não precisa fazer laço usando .removeChild() para isso. Basta esvaziar o .innerHTML do elemento:

let tabuada = window.document.getElementById('lista');
tabuada.innerHTML = ''; // esvazia a ul#lista

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .