JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<button <form name="form1">
<table border="1px solid #333;" style="float:left;margin:5px;">
<tr id="num0">
<td><input type="text" name="user" id="user0" value="aaa"></td>
</tr>
<tr id="num1">
<td><input type="text" name="user1" id="user1" value="bbb"></td>
</tr>
<tr id="num2">
<td><input type="text" name="user2" id="user2" value="ccc"></td>
</tr>
<tr id="num3">
<td><input type="text" name="user3" id="user3" value="ddd"></td>
</tr>
<tr id="num4">
<td><input type="text" name="user4" id="user4" value="eee"></td>
</tr>
<tr id="num5">
<td><input type="text" name="user5" id="user5" value="fff"></td>
</tr>
</table>
</form>
<table border="1px solid #333;" style="float:left;margin:5px;">
<tr id="d0">
<td><button id="aa">削除</button></td>
</tr>
<tr id="d1">
<td><button id="bb">削除</button></td>
</tr>
<tr id="d2">
<td><button id="cc">削除</button></td>
</tr>
<tr id="d3">
<td><button id="dd">削除</button></td>
</tr>
<tr id="d4">
<td><button id="ee">削除</button></td>
</tr>
<tr id="d5">
<td><button id="ff">削除</button></td>
</tr>
</table>
<button id='XXX'>test</button>
</body>
<script>
</script>
JavaScript
// 与えられた要素番号をIDに変換します
function indexToInputTrID(index) { return ('num' + index); };
function indexToRemoveTrID(index) { return ('d' + index); };
// IDを再セットします
function resetTrIDs() {
//
var inputTrs = document
.querySelectorAll('table')[0]
.querySelectorAll('tr');
inputTrs.forEach((tr, index) => tr.id = indexToInputTrID(index));
//
var removeTrs = document
.querySelectorAll('table')[1]
.querySelectorAll('tr');
removeTrs.forEach((tr, index) => tr.id = indexToRemoveTrID(index));
}
// 削除ボタンのクリックイベントハンドラーをセットします
function setBtnOnClickEvents() {
var removeTrs = document
.querySelectorAll('table')[1]
.querySelectorAll('tr')
.forEach((tr, index) => {
tr.addEventListener('click', onClickEventHandler);
});
}
// 削除ボタンのクリックイベントハンドラー
function onClickEventHandler(event) {
var index = this.id.match(/\d+/)[0];
document.getElementById(indexToInputTrID(index)).remove();
document.getElementById(indexToRemoveTrID(index)).remove();
resetTrIDs();
}
// 各要素を初期化します
resetTrIDs();
setBtnOnClickEvents();