JavaScriptリストの削除ボタン

Question

JavaScriptですることリストを作っており、入力テキストを自動でulタグに挿入する仕組みです。
することリスト

問題点
削除ボタンも同時に生成したのですが、削除ボタンを押してもうまくliが消えませんでした。

試したこと
削除ボタンを押した時の命令delfunc()を
配列を利用して、各々ユニークな命令名にしたりもした
（例）delFunc1()，delFunc2()...

解決したいこと
どのようにすれば、削除ボタンを押した時にliが削除されるでしょうか。ご教授いただけたら幸いです。

すること<input type= "text" id= "text"/>
<input type= "button" value= "追加" id= "btn" onclick= "clickFunc()"/>

<ul id= "list"></ul>

const txt = document.getElementById('text');
const btn = document.getElementById('btn');
const list = document.getElementById('list');

function clickFunc() {
    function delFunc() {
        this.remove();
    }
    const li = document.createElement('li');
    li.textContent = txt.value;
    
    /*削除ボタンここから*/
    const delBtn = document.createElement('input');
    delBtn.setAttribute('type', 'button');
    delBtn.setAttribute('onclick', 'delFunc()');
    delBtn.setAttribute('value', '削除');
    /*削除ボタンここまで*/
  
    list.appendChild(li);
    li.appendChild(delBtn);
    
}

Comments

[m.ts10806]

うまくいかないとは、なにがおきているのでしょうか。
デバッグはされましたか？
エラー確認とかthisが想定通りの情報かとか

Answer 1

const txt = document.getElementById('text');
const btn = document.getElementById('btn');
const list = document.getElementById('list');

function clickFunc() {
    const li = document.createElement('li');
    li.textContent = txt.value;
    li.setAttribute('class','toDo');

    /*削除ボタンここから*/
    const delBtn = document.createElement('input');
    delBtn.setAttribute('class', 'delete');
    delBtn.setAttribute('type', 'button');
    delBtn.setAttribute('onclick', 'delFunc(event)');
    delBtn.setAttribute('value', '削除');
    /*削除ボタンここまで*/

    list.appendChild(li);
    li.appendChild(delBtn);

}

function delFunc(event) {
  var li = event.target.parentNode.querySelectorAll('.delete');
  document.getElementsByClassName('toDo')[Array.prototype.indexOf.call(li, event.target)].remove();
}

こんな感じかな

サンプル

Answer 2

こんなかんじです

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const txt = document.querySelector('#text');
  const btn = document.querySelector('#btn');
  const list = document.querySelector('#list');
  btn.addEventListener('click',()=>{
    const li = Object.assign(document.createElement('li'),{
    textContent:txt.value
    });
    const delBtn = Object.assign(document.createElement('input'),{
    type:'button',value:'削除'
    });
    delBtn.addEventListener('click',e=>{
      e.target.closest('#list').removeChild(e.target.closest('li'));
    });
    list.appendChild(li);
    li.appendChild(delBtn);
  });
});
</script>

<input type= "text" value= "" id= "text">
<input type= "button" value= "追加" id= "btn">

<ul id= "list"></ul>