How to remove elements from a javascript list

Asked

Viewed 141 times

0

I’m making a small javascript program to generate a tabulation. To prevent duplicates from occurring, I put in a small code snippet to clear the list before generating the table

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

However, the list is not generated if I keep this code. Here is the full code: 

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);
    }
}
javascript list dom

2 answers

1

If you have a list:

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

To remove items from the list (all <li>) no need to make loop using .removeChild() to do so. Simply empty the .innerHTML of the element:

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

0


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>

  • It worked. But the following code snippet: while(timed.children.length > 0) { timed.removeChild(timed.Children[0]); } I didn’t get it right. Why does the removal always happen in the first position of the children of "tabuada"? Java script automatically reallocates the rest?

  • @Matheus10772 This excerpt you quoted is to remove the <li> within the <ul>. Imagine that the <ul> has 3 <li>, soon his children.length shall be equal to 3. When removing children[0] the length will be equal to 2. Then we remove again the children[0] and the length will become 1 and so on until there is no more <li> within the <ul>. It works like a stack of paper, you will always remove the first paper from the stack until there is no more.

  • Thank you !!! D

Browser other questions tagged javascript list dom

You are not signed in. Login or sign up in order to post.