行削除処理を同じファンクションで実行したい

Question

テーブルにチェックボックスを付けて、チェックがある行だけ行削除したいです。
複数のテーブルから同じファンクションを呼び出して削除処理をしたいと思っています。
javascript側でclassやNameを指定せずに、HTMLから引数でobjを渡して削除処理は可能でしょうか。
よろしくお願いいたします。

		<input type="button" value="一括削除" id="quoteDelTable" onclick="deleteSelectRow()">
		<table border="0" id="mainTable" class="table" >
			<thead>
		    <tr>
				<th></th>
		      	<th>番号</th>
		      	<th>品名</th>
				
		    </tr>
			</thead>
			<tbody>
		    <tr>
				<td><input type="checkbox" name="DeleteName[]" value="YES"></td>
				<td style="text-align:center; width:30px;">1</td>
				<td class="editEnable">テスト1</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="DeleteName[]" value="YES"></td>
				<td style="text-align:center; width:30px;">2</td>
				<td class="editEnable">テスト2</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="DeleteName[]" value="YES"></td>
				<td style="text-align:center; width:30px;">3</td>
				<td class="editEnable">テスト3</td>
			</tr>
			</tbody>
	  </table>
	  
	  <table border="0" id="subTable" class="table" >
			<thead>
		    <tr>
				<th></th>
		      	<th>番号</th>
		      	<th>品名</th>
				
		    </tr>
			</thead>
			<tbody>
		    <tr>
				<td><input type="checkbox" name="DeleteName[]" value="YES"></td>
				<td style="text-align:center; width:30px;">1</td>
				<td class="editEnable">テスト1</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="DeleteName[]" value="YES"></td>
				<td style="text-align:center; width:30px;">2</td>
				<td class="editEnable">テスト2</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="DeleteName[]" value="YES"></td>
				<td style="text-align:center; width:30px;">3</td>
				<td class="editEnable">テスト3</td>
			</tr>
			</tbody>
	  </table>

function deleteSelectRow(){

	const checkedList = document.querySelectorAll(".table [name='DeleteName[]']:checked");

	if (checkedList.length === 0) {
	alert("選択してください");
	return;
	}

	// 確認
	if (!confirm("選択した行を削除しますか？"))
		return;
	checkedList.forEach(check => check.closest("tr").remove());
}

Comments

[int32_t]

1つだけある一括削除ボタンは押すとすべてのテーブルを対象に削除処理をしたい、という意味でしょうか。

[yambejp]

提示の通りで動作しているようですが
「HTMLから引数でobjを渡して削除処理」とは何をしたいのでしょうか？

[k.kaga]

それぞれのテーブルに一括削除ボタンを設置し、それぞれのテーブルのみを削除したいです
今後もテーブルが増える予定なので、複数のテーブルから削除処理を呼び出せるようにしたいです

Answer 1

削除ボタンで

onclick="deleteSelectRow('#subTable')"

のように対象セレクタを与えて、deleteSelectRow() ではそのセレクタ内のチェックボックを処理すればよいでしょう。

function deleteSelectRow(target){
  const checkedList = document.querySelectorAll(target + " [name='DeleteName[]']:checked");

Comments

[k.kaga]

なるほど、希望していた動作となります。
ありがとうございます。