<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>События клавиатуры</title>
<style type="text/css">
</style>
<script>
window.onload = function(){
document.getElementById("btn").onclick = function(){
var body = document.getElementById("body");
var p = document.createElement("p");
var allP = document.getElementsByTagName("p");
if(allP.length > 10) {
for(var i = 0; i < allP.length; i++){
body.removeChild(allP[i]);
}
return false;
}
p.innerHTML = "PARAGRAPH";
body.appendChild(p);
}
}
</script>
</head>
<body id="body">
<button id="btn">Create Element</button>
</body>
</html>
getElementsByTagName возвращает динамическую коллекцию элементов, т.е. такую, которая автоматически обновляется при добавлении/удалении элементов. Поэтому сейчас у вас происходит следующее: удалили элемент с индексом 0, и у всех остальных элементов изменился индекс на единицу вниз, 0 вместо 1, 1 вместо 2 и т.д. При этом счётчик цикла вы на единицу увеличили, так что на следующей итерации удаляете элемент с индексом 1 - бывший 2. А тот, который был 1 и стал 0 - его вы пропускаете. А после следующего удаления пропускаете ещё один. Ну и т.д. Каждый второй.document.getElementsByTagName("p") на document.querySelectorAll('p'), так вы получите статическую коллекцию элементов.allP от конца к началу:for (let i = allP.length; i--;) {
body.removeChild(allP[i]);
}while (allP.length) {
allP[0].remove();
}body по id - безумие, этот элемент существует в единственном экземпляре и ссылка на него доступна как свойство объекта document. Так что id уберите и замените document.getElementById("body") на document.body.
Простой