deleteRowで２行まとめて削除する方法

Question

前提

プログラミング初心者です。htmlとjavascriptでプログラムのモック作成をしています。
htmlで作成したテーブルから、javascriptのDeleteRowで二行まとめて削除する方法を教えていただきたいです。

実現したいこと

左のバツボタンを押すと２列一緒に消せるようにしたいです。

ボタンのところは

<button onclick="deleteRow(this);>

functionは

function deleteRow(obj) {
        // 削除ボタンを押下された行を取得
        tr = obj.parentNode.parentNode;
        // trのインデックスを取得して行を削除する
        tr.parentNode.deleteRow(tr.sectionRowIndex);
        info.innerText = "";
    };

になっている状態です。先人が書いたコードから一行づつならできるのですが、バツボタンで同時に削除するためのコードがわからず困っています。どなたか教えてくださると幸いです。よろしくお願いいたします。

Answer 1

https://codepen.io/arcxor/pen/BaPowqv

HTMLTableElement.deleteRow() を使わずとも、単に tr.remove() でよいでしょう。

function deleteRow(obj) {
  const tr = obj.closest('tr');
  const tr2 = tr.nextElementSibling;
  tr.remove();
  tr2.remove();
}

Comments

[potesalad]

ありがとうございます！！

Answer 2

こんな感じでは？

<script>
document.addEventListener('click', e=>{
  const t=e.target;
  if(t.matches('.del')){
    const rs=Number(t.closest('td').getAttribute('rowspan')??1);
    const tr=t.closest('tr');
    const trs=[...tr.closest('tbody').querySelectorAll('tr')];
    const idx=trs.indexOf(tr);
    trs.splice(idx,rs).forEach(x=>x.remove());
  }
});
</script>
<table border>
<thead>
<tr>
<th>del</th>
<th>data</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="del">X</span></td>
<td>a</td>
</tr>
<tr>
<td rowspan="2"><span class="del">X</span></td>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
<tr>
<td rowspan="2"><span class="del">X</span></td>
<td>d</td>
</tr>
<tr>
<td>e</td>
</tr>
<tr>
<td rowspan="3"><span class="del">X</span></td>
<td>f</td>
</tr>
<tr>
<td>g</td>
</tr>
<tr>
<td>h</td>
</tr>
</tbody>
</table>

Comments

[potesalad]

ありがとうございます！