Delete a row from a table (HTML/JS)

Question

Title is pretty self-explanatory; I'm trying to add a delete button to each row of a table, but right now it's deleting the table headers instead of the actual row. This is the Javascript; any tips?:

function addRow() {
  var table = document.getElementById("todayTasks");
  var row = document.createElement('tr');
  row.id = "new_add";
  var td0 = document.createElement("INPUT");
  td0.type = "checkbox";
  td0.id = "checkbox";
  td0.onchange = updateItem;
  var td1 = document.createElement('td');
  var td2 = document.createElement('td');
  var td3 = document.createElement("input");
  td3.type = "button";
  td3.value = "Delete";
  td3.onclick = deleteFn;

  if (document.getElementById('task').value === "") {
    alert("Please provide a task.");
  } else if (document.getElementById('duration').value === "") {
    alert("Please provide a duration.");
  } else {
    td1.innerHTML = document.getElementById('task').value;
    td2.innerHTML = document.getElementById('duration').value;
    row.appendChild(td0);
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    table.children[0].insertBefore(row, table.children[0].childNodes[1]);
  }

  function updateItem() //Cross out when checked
  {
    if (document.getElementById("checkbox").checked) {
      document.getElementById("new_add").style.textDecoration = "line-through"
    } else {
      document.getElementById("new_add").style.textDecoration = "none"
    }
  }

  function deleteFn(x) {
    var i = x.rowIndex;
    document.getElementById("todayTasks").deleteRow(i);
  }

You can't append an input to a tr. You have to put it in a td and append that to the tr. — Barmar
– Barmar, Commented Jul 26, 2020 at 18:33
The argument to deleteFn is an Event object. It doesn't have a rowIndex property. — Barmar
– Barmar, Commented Jul 26, 2020 at 18:34
Element IDs are supposed to be unique. You can't use the same row.id = "new_add" and td0.id = "checkbox" in every row. — Barmar
– Barmar, Commented Jul 26, 2020 at 18:36

rayleigh · Accepted Answer · 2020-07-26 18:45:14Z

1

Your delete function take an event as an argument, that event hold a reference to the element via its property target. you can than get the tr which is the parent element of your input (if you wrap the input inside a td it would be the grand parent), then you can juste remove this element from the table

  function deleteFn(event) {
    var input = event.target;
    var currentRow = input.parentNode;
    document.getElementById("todayTasks").removeChild(currentRow);
  }

answered Jul 26, 2020 at 18:45

rayleigh

212 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

az-purplepen Over a year ago

Thanks! This is what I tried [html]: var td3 = document.createElement('td'); td3.type = "input"; td3.type = "button"; td3.value = "Delete"; td3.onclick=deleteFn; but it's still not working; any tips?

az-purplepen Over a year ago

Sorry the format is bad; I'm not sure how to put the code in. But yeah I tried wrapping the delete button in a td and adding an onclick event.

Collectives™ on Stack Overflow

Delete a row from a table (HTML/JS)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related