how to remove earliest lines from javascript div

Question

I'm adding lines to a div element with javascript using append:

myDiv.append("sometext <br>");

After say 20 lines, I'd like to remove the earliest line, and keep removing lines as I add new one to prevent it from getting to large. What is an easy way to do this?

Thanks.

Answer 1

Since you use "append", I assume you are using JQuery, and not straight JavaScript. In that case, I would write something like:

myDiv.find(':first-child').remove();

Answer 2

The easiest way is add the text a list, to count the total and remove the first. But, if you want to do with only plain text, you can do somethinh like this.

$("button").click(function(){
  var myDiv = $("div ul");
  var text = "<li>sometext " + Math.random(2) + " </li>";
  myDiv.append(text);
  if ($("div ul li").size() > 5){
    myDiv.find(':first-child').remove();  
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button>Add</button>

<div>
  <ul>
  </ul>
</div>

Answer 3

If you use jQuery, maybe you can try this:

myDiv.empty();