JavaScript remove dynamically created tr

Question

I have a js function that adds a tr to a table:

function AddData() {

    var rows = "";

    var product_id = $('input[name="product_name"]').val();

    var product_price = $('input[name="product_price"]').val();

    rows += "<td><input type='hidden' name='item_id[]' value='" + product_id + "'><p>" + name + "</p></td><td><input type='hidden' name='price[]' value='" + product_price + "' class='price'></td><td>&pound;<span id='amount' class='amount'>0</span></td><td><div class='btn btn-circle' onclick='RemoveData()' value='" + curtainid + "'>Delete</div></td>";
    var tbody = document.querySelector("#myTable tbody");
    var tr = document.createElement("tr");

    tr.innerHTML = rows;
    tbody.appendChild(tr)

    update_amounts();    
}

Within the <td> is a RemoveData() call. I want this to remove the selected tr from the table. I have tried to use:

function RemoveData() {

    var elements = document.getElementById('tr');
    last = elements[elements.length-1];

    last.parentNode.removeChild(last);

}

but with no success.

Answer 1

getElementById gets a single element, by its id. You're passing in a tag name and expecting it to return a list.

If your goal is to remove the last tr element anywhere on the page, you can use querySelectorAll instead:

function RemoveData() {

    var elements = document.querySelectorAll('tr'); // <== Main change
    var last = elements[elements.length-1];         // <== Note I added `var`
    last.parentNode.removeChild(last);
}

querySelectorAll works on all modern browsers, and IE8.

---

I added var to the last line because your code was falling prey to The Horror of Implicit Globals without it.

---

Re your comment below:

How would I remove a selected element...

I'd probably have a single event handler on the table and then trigger removal based on the event's target (e.g., delegated handling). That looks something like this:

"use strict";

var tbody = document.getElementById("the-tbody");

// Add rows when the button is clicked
document.getElementById("btn-add").addEventListener("click", addRow, false);
function addRow(e) {
  var row = document.createElement('tr');
  row.innerHTML = '<td>Hi there ' +
      Math.floor(Math.random() * 1000) +
      ' <span class="remove">[x]</span></td>';
  tbody.appendChild(row);
}

// Remove rows when their ".remove" span is clicked
tbody.addEventListener("click", removeRow, false);
function removeRow(e) {
  var elm;
  for (elm = e.target; elm !== this; elm = elm.parentNode) {
    if (/\bremove\b/.test(elm.className)) { // On modern browsers you could use `classList`
      // It's a remove link, remove its parent tr and we're done
      removeElement(elm.parentNode);
      e.stopPropagation();
      return;
    }
  }
}

function removeElement(elm) {
  elm.parentNode.removeChild(elm);
}

.remove {
  cursor: pointer;
}

<table>
  <tbody id="the-tbody"></tbody>
</table>
<input type="button" id="btn-add" value="Add Row">

There I'm using addEventListener. If you need to support older browsers, you can use the hookEvent function in this other answer instead.

Answer 2

I prefer the jQuery function .closest() to delete the selected row so you don't need to work with an Row-ID...because the threadstarter has already jQuery...try this:

$(document).ready(function(){
  $('button[name=deleteTR]').click(function(){
 $(this).closest('tr').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td><button type="button" name="deleteTR">Delete</button></td><td>Row 1</td></tr>
  <tr><td><button type="button" name="deleteTR">Delete</button></td><td>Row 2</td></tr>
  <tr><td><button type="button" name="deleteTR">Delete</button></td><td>Row 3</td></tr>
  <tr><td><button type="button" name="deleteTR">Delete</button></td><td>Row 4</td></tr>
</table>

Greetings from Vienna