JSFiddle - React, Tailwind, and code Playground

by santosonit

HTML

<head>
  <base target="_top">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
  </script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<table class="table table-borderless table-hover table-vcenter" id="dtable">
  <thead style="white-space: nowrap">
    <tr>
      <th style="width: 4%" class="text-center">Client ID</th>
      <th style="width: 4%" class="text-center">Task No</th>
      <th style="width: 25%" class="text-center">Task</th>
      <th style="width: 4%" class="text-center">Date Assigned</th>
      <th style="width: 3%" class="text-center">Link To File</th>
      <th style="width: 17%" class="text-center">Notes</th>
      <th style="width: 12%" class="text-center">Approval</th>
      <th style="width: 24%" class="text-center">Comments</th>
      <th style="width: 24%" class="text-center">Delete Task</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">AB002</td>
      <td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">2</td>
...

JavaScript

function deleteTask() {
  const dataTr = event.target.parentNode;
  const cancelTaskId = dataTr.parentNode.querySelectorAll("td")[1].innerText;
  const clientId = dataTr.parentNode.querySelectorAll("td")[0].innerText;
  let data = [];
  data.push([clientId, cancelTaskId]);

  const td = event.target.parentNode;
  const tr = td.parentNode;
  tr.parentNode.removeChild(tr);
}