JavaScriptでTodoリストを作成しています。

追加したTaskを削除ボタンを押したら、 追加したTaskとボタンが削除されるように 実装したいのですが、思った通りの動作ができません。 色々調べて実装したのですが、これ以上積んでわからない状態です。 何方かアドバイスをお願いします。

期待する動作 ①削除ボタン押下時にそのタスクを削除できる ②タスク削除時はIDが振り直される ③削除後、新たにタスクを追加するとIDが連番となっている

現在の状況

※下記のソースコードは以前このサイトで質問したページのソースです。 https://katakata-gym.com/question/36

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>課題③</title>
</head>
<body>
    <h1>TODOリスト</h1>
    
    <p class="radio">
      <input type="radio" id="r1" name="list" value="1" checked><label for="r1">全て</label>
      <input type="radio" id="r2" name="list" value="2"><label for="r2">作業中</label>
      <input type="radio" id="r3" name="list" value="3"><label for="r3">完了</label>
    </p>

<table>
  <thead>

main.js
'use strict';
{
//inputタグを取得して変数に入れる
const newtask = document.getElementById('newtask');

// 入力された値をリストに追加する
const add = document.getElementById('add');

add.addEventListener('click',() => {
if(newtask.value =='') {
    return
}
  // olタグを取得して変数に入れる
  const list = document.getElementById('list')

  const id = list.children.length + 1;
  const comment = newtask.value;

  // 分かりやすい変数名をつけます
  const workButton = document.createElement('button');
  workButton.innerHTML = '作業中';

  const deleteButton = document.createElement('button');
  deleteButton.innerHTML = '削除';
  // テーブルの行に必要なデータの配列を作成します
  const cloumns = [id, comment, workButton, deleteButton]

  //　テーブルの行を作成します
  const tr = document.createElement('tr');

  // 配列の中身を一つずつ取り出して処理をします
  cloumns.forEach((cloumn) => {
  // テーブルの列を作成します
  const td = document.createElement('td');

  // HTMLタグ処理を変更
  if (cloumn instanceof HTMLElement) {
      td.appendChild(cloumn)
  } else {
    td.innerText = cloumn;
  }
  // 行に列を追加します
    tr.appendChild(td);
  
  })
  //テーブルに行を追加
  list.appendChild(tr);

  newtask.value = ''


})
}