JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<form method="DELETE" action="/flight/delete/" id="deleteForm" target="_blank">
<table>

    <tr>
      <td>6</td>
      <td></td>
      <td>team.a</td>
      <td><input type="checkbox" class="deleteCheckbox" name="id6" id="6" value="6"></td>
      <td><input type="submit" value="Delete flight" class="deleteButton"></td>
    </tr>
    <tr>
      <td>7</td>
      <td></td>
      <td>team.b</td>
      <td><input type="checkbox" class="deleteCheckbox" name="id7" id="7" value="7"></td>
      <td><input type="submit" value="Delete flight" class="deleteButton"></td>
    </tr>
    <tr>
      <td>8</td>
      <td></td>
      <td>team.c</td>
      <td><input type="checkbox" class="deleteCheckbox" name="id8" id="8" value="8"></td>
      <td><input type="submit" value="Delete flight" class="deleteButton"></td>
    </tr>
</table>

</form>

JavaScript

function deleteButtonClickHandler(event) {
  event.preventDefault();

  var deleteForm = document.getElementById('deleteForm');
  var checkboxes = deleteForm.querySelectorAll(".deleteCheckbox");
  for(var i = 0; i < checkboxes.length; i++) {
    if(checkboxes[i].checked) {
      var flightId = checkboxes[i].value;
      deleteForm.action += flightId;
      checkboxes[i].parentElement.removeChild(checkboxes[i]);
      var deleteForm = document.getElementById('deleteForm');
      //deleteForm.submit();
      return;
    }
  }
  alert("Please check flight and then click on button");
  return false;
}
document.getElementById('deleteForm').onsubmit = deleteButtonClickHandler;