Question

我有一个表格，我可以在其中添加带输入字段的新行。此外，还可以删除添加的输入字段。删除完整的行有效，但删除单元格内的单个输入字段存在问题。这是代码：

cell1=document.getElementById('avz_tabelle').rows[par.rowIndex].cells;

var feld = document.createElement("input"); 
feld.setAttribute("name","avz_keywords" + avz_array + "[]"); 
feld.setAttribute("onblur","");
feld.setAttribute("type","text"); 
feld.setAttribute("size","30"); 
cell1[1].appendChild(feld);

var remove = document.createElement("a");
remove.setAttribute("href","#");
remove.setAttribute("onclick","this.parentNode.parentNode.removeChild(this.parentNode);");
remove.innerHTML = " X";
cell1[1].appendChild(remove);
var br = document.createElement("br");
cell1[1].appendChild(br);

问题是删除操作完全删除整个单元格，而不是相关的输入字段。奇怪的是，这可以在表的第一层工作而没有问题。你看到错误吗？谢谢你的任何建议！

Answer 1

好的，您要将锚元素remove附加到cell1[1]，这是索引为par.rowIndex的行的单个表格单元格。所以锚元素的parentNode是单元格。使用this.parentNode.parentNode.removeChild(this.parentNode)，您将删除锚点的parentNode，即单元格。

编辑：删除了一个可能令人反感的句子......抱歉： - ）

EDIT2：可能的解决方案：

this.previousSibling.parentNode.removeChild(this.previousSibling);

因为this.previousSibling可能是输入元素

Answer 2

由于您使用DOM构建HTML，因此不必为事件设置属性：

用以下内容替换remove.setAttribute("onclick"...：

remove.onclick = function(ev){
  feld.parentNode.removeChild(feld);
}

feld和onclick函数在同一范围内定义，这里有一个闭包。它使函数内部feld可用。

Javascript - removeChild删除表的整个单元格

2 个答案: