todolist チェックボックスにチェックが入っている時に、選択削除ボタンを押したら削除できるようにしたい

javascriptのtableタグにチェックボックスが付いています
フレームワークを使わず、動的にtbodyを追加しtbodyの中に入っているチェックボックスがあります
このチェックボックスにチェックが入っている蘭を、選択削除ボタンをクリックして削除できるようにしたいです

htmlで以下のコードがあったとします

//js
//少しコードを省略

start.addEventListener('click', () => {
const tRecord = document.createElement('tr')
tBody.appendChild(tRecord)
const tId = document.createElement('td')
tRecord.appendChild(thBox)

const tCheck = document.createElement('td')
const tInput = document.createElement('input')
tInput.type = 'checkbox'
tCheck.appendChild(tInput)
tRecord.appendChild(tCheck).classList.add('center')

//これがわからない
const selectionDeleteButton = () => {
const deleteButton = document.createElement('button');
deleteButton.textContent = '選択削除';
deleteButton.addEventListener('click', () => {
todos.splice(tRecord, 1);
showTodos();
});
return deleteButton;
};

選択削除の仕方わかる方いらしたら、ご教授願います

行動規範の内容に同意します

回答1件

他人様の書いたものは助長すぎて理解できないことが多いですね。
テーブルの最初の行を雛型にします。そして隠しておきます。

HTML&JS
1<!DOCTYPE html>
2<meta charset="UTF-8">
3<title>to do list ?</title>
4
5<style>
6tbody tr:first-of-type { display: none;}
7tr td:first-of-type { text-align: center;}
8</style>
9
10<body>
11<table border="1">
12  <tbody id="TB">
13    <tr>
14      <td><input name="chk" type="checkbox" value="on">
15      <td><output name="job"></output>
16      <td><output name="job2"></output>
17      <td><button>選択削除</button>
18</table>
19
20<script>
21const
22  RECS = [
23    {chk: 'on', job: 'あきらめたか？', job2: '多分そう'},
24    {chk: null, job: '新規登録は？', job2: '未実装'},
25    {chk: null, job: 'レコードの読み込み方法は？', job2:'新たに質問するべきかAjaxか'},
26    {chk: null, job: 'レコードの保存方法は？', job2:'クッキーじゃないでしょう'},
27  ];
28
29
30function replaceTable (tbody, recs) {
31  let [first, ...other] = tbody.rows;
32  other.forEach (e=> e.remove ());
33
34  for (let rec of recs) {
35    let
36      tr = tbody.appendChild (first.cloneNode (true)),
37      io = tr.querySelectorAll ('*[name]');
38
39    for (let e of io)
40      if (rec.hasOwnProperty (e.name))
41        /checkbox|radio/.test (e.type)
42        ? e.checked = e.value == rec[e.name]
43        : e.value = rec[e.name];
44  }
45}
46
47function delRec (no) {
48  RECS.splice (no, 1);
49}
50
51
52function delRow (e) {
53  let tr = e.closest ('tr');
54  if (tr) {
55    if (tr.querySelector ('td:first-of-type input[type="checkbox"]:checked')) {
56      delRec (tr.rowIndex - 1);
57      tr.remove ();
58      replaceTable (TB, RECS);
59    }
60  }
61}
62
63
64function handler (event) {
65  let e = event.target;
66  if ('BUTTON' === e.tagName) {
67    if ('選択削除' === e.textContent) {
68      delRow (e);
69    }
70    event.preventDefault ();
71  }
72}
73
74//________________
75replaceTable (TB, RECS);
76document.addEventListener ('click', handler, false);
77
78</script>