JavaScriptでボタン押下時に作成した子要素の非表示の方法

前提・実現したいこと

いつも大変お世話になっております。
現在、JavaScriptの勉強を行っています。
機能は下記になります。
１：登録ボタンを押下したらテキストボックスの内容が子要素に追加される。
２：上記で追加された子要素の数が5を超えた場合、「display:none」で子要素を非表示にする。

「１」の機能の実装はうまくいったのですが、「２」の実装を行おうとしたところ下記エラーが発生しました。

個人的には、非表示にするタイミングが悪いのではないかと考えております。

実装場所を変更したりしたのですが、結果は解決しなかったため質問させていただきました。
どなたか解決策のご教授をよろしくお願いいたします。

発生している問題・エラーメッセージ

ToDoList.js:38 Uncaught TypeError: Cannot set property 'display' of undefined
    　　　　　   at HTMLInputElement.document.getElementById.onclick (ToDoList.js:38)

該当のソースコード

JavaScript
1document.getElementById('insert').onclick = function() {
2    var textnode = document.getElementById('textbox');
3    
4    var textinput = textnode.value;
5    
6    var todonode = document.getElementById('todolist');
7    
8　　//テキストボックスの値がnullではない場合、子要素を作成する。
9    if(textinput != null){
10        var p = document.createElement('p');
11        
12        p.innerHTML = textinput;
13        
14        var addtodolist = document.getElementById('todolist');
15        
16        addtodolist.appendChild(p);
17        
18        //ここで判定を行い、子要素を非表示にする。
19        if(addtodolist.childElementCount >= 5){
20            //addtodolist.children.style.display='none';
21            addtodolist.chi
22        }
23    }
24    
25};