Удалить тег tr с помощью dom JS

Question

Я создал функцию в js, которая создает таблицу с методами DOM, затем я добавил кнопку, которая должна удалить соответствующую строку. Можете ли вы помочь мне построить функцию для удаления строки? Это мой код

function creaTable(a, b) {
  var tableDiv = document.getElementById("myDynamicTable");
  var tbl = document.createElement('table');
  tbl.setAttribute("id", "tabella");
  var tbdy = document.createElement('tbody');
  tbl.appendChild(tbdy);
  tbl.border = '1';

  for (var j = 0; j < a ; j++) {
    var tr = document.createElement('tr');
    tbdy.appendChild(tr);
    var btnDelete = document.createElement('input');
    btnDelete.setAttribute("type", "button");
    btnDelete.setAttribute("value", "-");
  //  btnDelete.setAttribute("onclick", "delete(tr)");
    tr.appendChild(btnDelete);

  for (var k = 0; k < b ; k++) {
    var td = document.createElement('td');
    td.width = '75';
    td.appendChild(document.createTextNode("Cella "+j+","+k));
    tr.appendChild(td);
    }
  }
  tableDiv.appendChild(tbl);
}

Answer 1

1. вы можете использовать ближайший, чтобы найти родительский элемент.(это не будет работать в InternetExplorer, см. здесь для поддерживаемых браузеров и подробностей)
2. вы можете привязать события к элементам, используя функцию "addEventListener ('eventType', {FunctionName})" на узле,- вы можете прочитать больше здесь или здесь .
3. запустите функцию "удалить" для элемента tr.

вот пример кодового заглушки .

//------------------------------------------------------------------
    function creaTable(a, b) {
      var tableDiv = document.getElementById("myDynamicTable");
      var tbl = document.createElement("table");
      tbl.setAttribute("id", "tabella");
      var tbdy = document.createElement("tbody");
      tbl.appendChild(tbdy);
      tbl.border = "1";

      for (var j = 0; j < a; j++) {
        var tr = document.createElement("tr");
        tbdy.appendChild(tr);
        var btnDelete = document.createElement("input");
        btnDelete.setAttribute("type", "button");
        btnDelete.setAttribute("value", "-");
        // register the btn to start a function on click
        btnDelete.addEventListener("click", deleteMyTr);
        tr.appendChild(btnDelete);

        for (var k = 0; k < b; k++) {
          var td = document.createElement("td");
          td.width = "75";
          td.appendChild(document.createTextNode("Cella " + j + "," + k));
          tr.appendChild(td);
        }
      }
      tableDiv.appendChild(tbl);
    }
    creaTable(5, 6);

    // delete function
    function deleteMyTr() {
      // get the closest tr -> this is the btn element
      let tr = this.closest("tr");
      // remove the element
      tr.remove();
    }

Answer 2

Вам просто нужна функция, которая .remove() s tr.Также убедитесь, что вы используете const вместо var для определения объема блока, а не для определения функции, потому что вы находитесь в для цикла :

// ...
const tr = document.createElement('tr');
tbdy.appendChild(tr);
const btnDelete = document.createElement('input');
btnDelete.type = "button";
btnDelete.value = "-";
btnDelete.onclick = () => tr.remove();
// ...

Вы также можете назначитьнепосредственно к свойствам элемента, а не setAttribute - таким образом, он выглядит чище.