Remove tr tag with dom JS

Question

I've created a function in js which create a table with DOM methods, then I added some button which should remove the corresponding row. Can you help me to build a function to remove a row? This is my code

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

Possible duplicate of [HTML table "Add Row" or "Remove Row" button column](https://stackoverflow.com/questions/9304032/html-table-add-row-or-remove-row-button-column) — Aman B, Sep 12 '18 at 08:12

score 0 · Accepted Answer · answered Sep 12 '18 at 07:55

0

You just need a function that .remove()s the tr. Also make sure to use const rather than var, for block scoping rather than function scoping, because you're in a for loop:

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

You can also assign directly to the element's properties rather than setAttribute - that way, it looks cleaner.

answered Sep 12 '18 at 07:55

CertainPerformance

356,069
52
309
320

Thank you. But in this way we remove just the last row, how can I remove the specific row near the button? – Grazia Bo Sep 12 '18 at 08:02
1

Did you make sure to use `const tr` rather than `var tr`? If you use `var`, the variable `tr` will be function-scoped rather than block-scoped, so by the end, `tr` will refer to the last row, rather than there being a separate binding for each iteration. – CertainPerformance Sep 12 '18 at 08:02
I'm trying to transform the arrow function in a traditional function. Can you help me please? Because I'm not very good in js and I have not studied yet the arrow function – Grazia Bo Sep 12 '18 at 08:40
It's the same as an arrow function here, arrow functions are just more concise. `.onclick = function() { tr.remove(); };` or, use `.onclick = tr.remove.bind(tr)` – CertainPerformance Sep 12 '18 at 08:42

score -1 · Answer 2 · answered Sep 12 '18 at 08:16

you can use closest to find the parent element. (this will not work in InternetExplorer see here for supported browsers & details)
you can bind events to elements using "addEventListener('eventType',{FunctionName})" function on the node. - you can read more here, or here.
1. run the "remove" function on the tr element.

here is a runing codepen example.

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

Remove tr tag with dom JS

2 Answers2