チェックボックスで選択削除する方法

前提・実現したいこと

お世話になっております。
最近プログラムを勉強し始めてチェックボックスを使用した削除ボタンを作成してみたいのですが
思い通りにいかずでして、どなたかご教授頂けませんでしょうか。
行いたいことは下記内容になります。

・チェックボックスでチェックしたものを削除したい。
・削除ボタンを押した際「削除しますか？」といったアラートを表示。
・何も選択せずに押した場合は「選択してください」を表示。
・「はい」を選択したときのみ、選択したものが削除される。

以上になります。
不勉強で申し訳ございませんが宜しくお願い致します。

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

まだエラーメッセージが出るところまでいけていない状態です。

該当のソースコード

<table border=1 class="table">
<tr>
<th>No</th>
<th>名前</th>
<th>削除</th>
<tr>
　<td>1</td>
　<td>田中</td>
　<td><input type="checkbox" name="DeleteName[]" value="1"></td>
</tr>
<tr>
　<td>2</td>
　<td>山田</td>
　<td><input type="checkbox" name="DeleteName[]" value="2"></td>
</tr>
<tr>
　<td>3</td>
　<td>鈴木</td>
　<td><input type="checkbox" name="DeleteName[]" value="3"></td>
</tr>

<div align=left>
　<button type="button" class="btn btn-primary" onclick="delete()";>削除</button>
</div>
</table>


Javascript
function delete(){
　if(document.mainform.DeleteName.value==""){
　　alert("選択されていません。");
　　return false;
　}
}

試したこと

何を試せばいいのかもわからない状態です。申し訳ございません。
検索をかけて似たようなものがないか調べたのですがわかりませんでした。

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

回答1件

ベストアンサー

deleteという名前は、JavaScriptの演算子で存在し、予約語とされているため使えないようなので
deleteRowという名前に変更していますが、変えたければ好きにしてください。

HTML
1<table border=1 class="table">
2  <tr>
3    <th>No</th>
4    <th>名前</th>
5    <th>削除</th>
6  <tr>
7    　<td>1</td>
8    　<td>田中</td>
9    　<td><input type="checkbox" name="DeleteName[]" value="1"></td>
10  </tr>
11  <tr>
12    　<td>2</td>
13    　<td>山田</td>
14    　<td><input type="checkbox" name="DeleteName[]" value="2"></td>
15  </tr>
16  <tr>
17    　<td>3</td>
18    　<td>鈴木</td>
19    　<td><input type="checkbox" name="DeleteName[]" value="3"></td>
20  </tr>
21
22  <div align=left>
23    　<button type="button" class="btn btn-primary" onclick="deleteRow()">削除</button>
24  </div>
25</table>
26
27<script>
28function deleteRow() {
29  const checkedList = document.querySelectorAll(".table [name='DeleteName[]']:checked");
30  if (checkedList.length === 0) {
31    alert("選択してください");
32    return;
33  }
34  if(!confirm("削除しますか？")) {
35    return;
36  } 
37  checkedList.forEach(check => check.closest("tr").remove());
38}
39</script>