javascript todoリスト　削除できない

質問失礼いたします。表題の通りtodoリストの削除が適応されません。
日付や、やるべき内容などを格納したオブジェクトを配列にして、ブラウザに表示しています。
最終的に、spliceメソッドを使いtodoの削除を試みたのですが反映されませんでした。これは何が原因で、どのような対処をすればよいのでしょうか。
大変恐縮ではございますが、ご教授お願い申し上げます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="style.css">
8    <title>Document</title>
9</head>
10<body>
11    <table class="table">
12        <tr>
13            <th>日付</th>
14            <th>やること</th>
15            <th>優先度</th>
16            <th>削除ボタン</th>
17        </tr>
18    </table>
19    <div class="register">
20        <input type="text" id="input" value="3">
21        <button class="btn">登録</button>
22
23    </div>
24
25    <script src="main.js"></script>
26</body>
27</html>

js
1
2let todos = [];
3
4document.addEventListener('DOMContentLoaded',function(){
5   register();
6
7})
8
9function register(){
10    
11    let btn = document.querySelector('.btn');
12    btn.addEventListener('click',addValue);
13}
14
15function addValue(){
16    let inputValue = document.querySelector('#input').value;
17    let obj = {};
18    obj.todoContent = inputValue;
19    const time = new Date();
20    obj.todoTime = time.toLocaleString();
21    obj.todoPriority = '3';
22    obj.isDone = false;
23    todos.push(obj);
24    const tE = document.querySelector('.table');
25    let newTe = '<tr>'
26    newTe += `<td>${obj.todoTime}</td><td>${obj.todoContent}</td><td>${obj.todoPriority}</td><td><button class="delete">削除</button></td>`
27    newTe += '</tr>'
28    tE.insertAdjacentHTML('beforeend',newTe);
29    del();
30   
31
32}
33
34function del(){
35   const delBtn = document.querySelectorAll('.delete')
36   console.log(delBtn);
37   delBtn.forEach(ent => {
38       ent.addEventListener('click',function(){
39           todos.splice(0,1);
40           console.log(todos);
41       })
42   })
43}