Erasing rows from bottom to top

Navigation
1

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

Full 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 lines from the bottom up.

    
asked by anonymous 19.05.2016 / 10:14

2 answers

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>
    
19.05.2016 / 18:16
2

For this you will 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>
    
19.05.2016 / 10:27
Treat 404 in html5 video Catch the data inside a result json_decode