Question

以下代码适用于在HTMl中添加新行：

function addRow() 
{
  var row = document.getElementById('row');
  var newRow = row.cloneNode(true);
  row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}

如何添加新功能以删除行？我试着搜索但找不到答案。

Answer 1

要在Javascript中删除DOM元素，请使用removeChild API。这要求您拥有容器和要删除的项目的DOM元素。

在此示例中，如果您要删除标识为row的行，则可以执行以下操作

var row = document.getElementById('row');
row.parentNode.removeChild(row);

文档：https://developer.mozilla.org/En/DOM/Node.removeChild

注意：在此特定示例中，您似乎正在添加具有相同id值的多个DOM节点。不允许使用重复的id值，这将导致您遇到很多问题。每个id值都必须是唯一的。

实现此目的的一种方法是使用计数器为您添加的每一行添加唯一后缀。

var rowCounter = 0;
function addRow() 
{
  rowCounter++;
  var row = document.getElementById('row');
  var newRow = row.cloneNode(true);
  newRow.id = 'new_row_' + rowCounter;
  row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}

Answer 2

您正在寻找removeChild（）函数。

Answer 3

我认为你的addRow（）函数存在问题。您正在克隆节点，然后保留相同的“行”ID。

function addRow() 
{
  var row = document.getElementById('row');
  var newRow = row.cloneNode(true);

  // set newRow.id to something other than 'row'

  row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}

要删除节点，可以使用removeChild（）从元素中删除子节点

例如，x.removeChild（y）将删除节点x的子y。

Answer 4

如果你已经有了目标行，你就可以这样做......

row.parentNode.deleteRow(row.rowIndex);

https://developer.mozilla.org/en/DOM/table.deleteRow

文档适用于table，但tbody元素具有相同的方法。

Answer 5

如果在将它们附加到DOM之前从函数返回行，则可以将它们记录在对象或数组中。然后，您可以使用removeChild（之前提到的）轻松删除它们，而无需再次搜索文档。

我有一个工作的Javascript代码来添加新的html行。如何删除一个？

5 个答案: