Why can't I get the task number from this HTML table when clicking on a button in the same row?-CodePudding

I've been trying to adjust this solution to my situation, but I don't seem to be able to get the column containing the task numbers.

Here's the Fiddle.

Also, I'm not sure if deleting the row from the table after getting the task deleted is correctly built.

This is the function beating me:

function deleteTask(){
  const delTask = document.querySelectorAll(".del-btn");
  let deleteTaskId = 0;
  for (let i = 0; i < delTask.length; i  ) {
      delTask[i].addEventListener("click", function(event) {
          let dataTr = event.target.parentNode;
          deleteTaskId = dataTr.querySelectorAll("td")[1].innerText;
      });
  }
  console.log(deleteTaskId)
  const td = event.target.parentNode;
  const tr =td.parentNode;
  tr.parentNode.removeChild(tr);
}

Appreciate any help!

CodePudding user response：

You can find the solution for your problem here. In your example, the value of event.target.parentNode would be the td within which the button is placed. To obtain the tr of the button, you need to get the parent of td and then get innerText to obtain the task id.

function deleteTask(){
  const delTask = document.querySelectorAll(".del-btn");
  let deleteTaskId = 0;
  for (let i = 0; i < delTask.length; i  ) {
      delTask[i].addEventListener("click", function(event) {
          let dataTr = event.target.parentNode;
          deleteTaskId = dataTr.parentNode.querySelectorAll("td")[1].innerText;
          console.log(deleteTaskId)
      });
  }
  console.log(deleteTaskId)
  const td = event.target.parentNode;
  const tr =td.parentNode;
  tr.parentNode.removeChild(tr);
}

CodePudding user response：

I have used forEach loop to loop through the all .del-btn.
I onclick event first i selected TD than I selected it's parent tr, after that I selected td[1] second column basically which contains task id , with reference of tr``.(deletingRow.querySelectorAll("td")[1]) and used innerText to get id value of that column.
After that I am deleting tr.

 if (deletingRow.parentNode) {
              deletingRow.parentNode.removeChild(deletingRow);
            }

const table = document.querySelector("#dtable");

function deleteTask() {
  const delTask = document.querySelectorAll(".del-btn");
  let deleteTaskId = 0;
  delTask.forEach(deletedTask => {
    deletedTask.addEventListener("click", (e) => {
      const deletingTd = e.target.parentNode;
      const deletingRow = deletingTd.parentNode;
      deleteTaskId = parseInt(deletingRow.querySelectorAll("td")[1].innerText);
      if (deletingRow.parentNode) {
        deletingRow.parentNode.removeChild(deletingRow);
        console.log(`Deleted task ID:${deleteTaskId}`);
      }
    });
  });
}

<table  id="dtable">
  <thead style="white-space: nowrap">
    <tr>
      <th style="width: 4%" >Client ID</th>
      <th style="width: 4%" >Task No</th>
      <th style="width: 25%" >Task</th>
      <th style="width: 4%" >Date Assigned</th>
      <th style="width: 3%" >Link To File</th>
      <th style="width: 17%" >Notes</th>
      <th style="width: 12%" >Approval</th>
      <th style="width: 24%" >Comments</th>
      <th style="width: 24%" >Delete Task</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">AB002</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">1</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">review</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">06/30/2022</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td ><input type="button" value="Delete" onclick="deleteTask()"></td>
    </tr>
    <tr>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">AB002</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">2</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">provide</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">07/04/2022</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td ><input type="button" value="Delete" onclick="deleteTask()"></td>
    </tr>
    <tr>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">AB002</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">3</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">review</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">07/07/2022</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td ><input type="button" value="Delete" onclick="deleteTask()"></td>
    </tr>
    <tr>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">AB002</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">4</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td ><input type="button" value="Delete" onclick="deleteTask()"></td>
    </tr>
    <tr>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">AB002</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center">5</td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td  style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
      <td ><input type="button" value="Delete" onclick="deleteTask()"></td>
    </tr>
  </tbody>
</table>