wie x p tags aus einem div zu entfernen

Question

ich habe ein div, das mit javascript aktualisiert wird, fügt das javascript neue p tags in die div. um es nicht unordentlich zu bekommen, möchte ich eine definierte Menge von p Tags aus dem div entfernen. Wie kann ich entfernen x p Tags aus dem Div beginnend am Anfang des div, so dass die erste gelöscht wird

Text

der zweite

text1

und so weiter? die div sieht wie folgt aus:

<div id="messages"> 
<p>text</p> 
<p>text1</p> 
<p>text2</p> 
<p>text3</p> 
<p>text4</p> 
<p>text5</p> 
</div> 

und bitte ohne jquery. exakt die gleiche Frage ist diese: jquery how to remove the first x div's? aber da es gibt es nur mit jquery es nicht, mich für Ihre Zeit :)

Answer 1

let count = 0; 
 

 
function add() { 
 
    let messages = document.getElementById('messages'); 
 
    let newMessage = document.createElement('div'); 
 
    newMessage.innerText = 'text' + count; 
 
    count++; 
 

 
    messages.appendChild(newMessage); 
 

 
    if (count > 5) messages.removeChild(messages.firstElementChild); 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div id="messages" class="row"></div> 
 
    <div class="row"><button onclick="add()">Add</button></div> 
 
</div>

Answer 2

Auf diese Weise

Dank helfen; ], Entferne ich die letzten drei <p> 's

var div = document.getElementById('messages'); 
 
var removeItem = 3; 
 
for(var i = div.children.length - 1; i >= removeItem; i--) { 
 
    div.removeChild(div.children[i]); 
 
}

<div id="messages"> 
 
<p>text</p> 
 
<p>text1</p> 
 
<p>text2</p> 
 
<p>text3</p> 
 
<p>text4</p> 
 
<p>text5</p> 
 
</div>