Erasing bottom lines up

Question

I’m using the method innerHTML(); to display 60 lines on the page. As soon as, I need to delete 20 to 20 lines à every click on the button.

Complete source code:

for (i = 0; i <= 60; i += 1) {
  document.getElementById("lista").innerHTML += '<span>Linha &nbsp;&nbsp;</span>' + i.toString()+'<br/>';
}

<p id="lista"></p>

<hr>

<center>

<button onclick="document.getElementById('lista').innerHTML='';">Apagar</button>

DETAIL - I want to delete the bottom lines up.

Answer 1

For that you’ll have to put visible=hidden and display=none

var numeroLinhas=60;

function apaga(){

  if(numeroLinhas!=0)
  for(i=numeroLinhas ; i>numeroLinhas-20 ; i--)
    {
      document.getElementById("linha"+i).style.visibility="hidden";
      document.getElementById("linha"+i).style.display="none";
    }
  numeroLinhas=i;
  
}

<hr id="linha1">
<hr id="linha2">
<hr id="linha3">
<hr id="linha4">
<hr id="linha5">
<hr id="linha6">
<hr id="linha7">
<hr id="linha8">
<hr id="linha9">
<hr id="linha10">
<hr id="linha11">
<hr id="linha12">
<hr id="linha13">
<hr id="linha14">
<hr id="linha15">
<hr id="linha16">
<hr id="linha17">
<hr id="linha18">
<hr id="linha19">
<hr id="linha20">
<hr id="linha21">
<hr id="linha22">
<hr id="linha23">
<hr id="linha24">
<hr id="linha25">
<hr id="linha26">
<hr id="linha27">
<hr id="linha28">
<hr id="linha29">
<hr id="linha30">
<hr id="linha31">
<hr id="linha32">
<hr id="linha33">
<hr id="linha34">
<hr id="linha35">
<hr id="linha36">
<hr id="linha37">
<hr id="linha38">
<hr id="linha39">
<hr id="linha40">
<hr id="linha41">
<hr id="linha42">
<hr id="linha43">
<hr id="linha44">
<hr id="linha45">
<hr id="linha46">
<hr id="linha47">
<hr id="linha48">
<hr id="linha49">
<hr id="linha50">
<hr id="linha51">
<hr id="linha52">
<hr id="linha53">
<hr id="linha54">
<hr id="linha55">
<hr id="linha56">
<hr id="linha57">
<hr id="linha58">
<hr id="linha59">
<hr id="linha60">




<button onclick="apaga();">APAGA</button>

Answer 2

you can use lastChild.:

var linha = document.getElementById("linha");
var remover = document.getElementById("remover");

for (var i = 0; i < 60; i++) {
  var span = document.createElement("div");
  span.textContent = "Linha " + i;
  span.classList.add("item");
  linha.appendChild(span);
}

remover.addEventListener("click", function (event) {
  for (var i = 0; i < 20; i++) {
    linha.removeChild(linha.lastChild);
  }
});

div.item {
  width: 60px;
  float: left;
  padding: 5px;
  background-color: whitesmoke;
  box-shadow: 0px 0px 5px black;
  margin: 5px;
  border-radius: 5px;
}

<input id="remover" type="button" value="Remover Ultimos 20" />
<div id="linha">
  
</div>