Question

我有一个js函数，可以将tr添加到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();    
}

在<td>内RemoveData()来电。我想要从表中删除选定的tr。我试过用：

function RemoveData() {

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

    last.parentNode.removeChild(last);

}

但没有成功。

Answer 1

getElementById由id获取单个元素。您传递的是标记名称，并希望它返回一个列表。

如果您的目标是移除页面上任意位置的最后一个tr元素，则可以改为使用querySelectorAll：

function RemoveData() {

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

querySelectorAll适用于all modern browsers, and IE8。

我已将var添加到last行，因为您的代码在没有它的情况下成为The Horror of Implicit Globals的牺牲品。

重新评论以下内容：

如何删除所选元素...

我可能在表上有一个事件处理程序，然后根据事件的目标触发删除（例如，委托处理）。看起来像这样：

"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">

我正在使用addEventListener。如果您需要支持旧浏览器，则可以使用this other answer中的hookEvent功能。

Answer 2

我更喜欢使用jQuery函数.closest()删除所选行，因此您不需要使用Row-ID ...因为threadstarter已经有了jQuery ...试试这个：

$(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>

来自维也纳的问候

JavaScript删除动态创建的tr

2 个答案: