從表中刪除一行 (HTML/JS)

Question

標題是不言自明的； 我正在嘗試向表格的每一行添加一個刪除按鈕，但現在它正在刪除表格標題而不是實際行。 這是 Javascript； 有小費嗎？：

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);
  }

Answer 1

您的 delete function 將事件作為參數，該事件通過其屬性目標保存對元素的引用。 您可以獲得作為輸入的父元素的 tr （如果您將輸入包裝在 td 中，它將是祖父），然后您可以從表中刪除此元素

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