单击行按钮删除动态创建的 Table 行

Question

我试图在用户单击作为 table 行的一部分的删除按钮时删除动态创建的 table 行。但这似乎对我不起作用。我尝试了许多不同的方法，但它仍然要么从第一个创建的行中删除，要么根本不删除。这是我目前手头上的，但不起作用。

JS函数：

var rowID=0;
var table = document.createElement('table');
table.id = "attrtable";
table.className = "attrtable";

function showAttributes()
{
    var tr = document.createElement('tr');
    tr.id=rowID;
    var attributeName = document.getElementById("attNam").value;
    var choice=document.getElementById("attrTypefromCombo");
    var attrTypeCombo = choice.options[choice.selectedIndex].text;

    showAttrDivision.appendChild(attrName);
    showAttrDivision.appendChild(attrType);
    showAttrDivision.appendChild(closeattr);

    var tdAttrName = document.createElement('td');
    var tdAttrType = document.createElement('td');
    var tdDelete   = document.createElement('td');

    var text1 = document.createTextNode(attributeName);
    var text2 = document.createTextNode(attrTypeCombo);
    var deletebtn =  document.createElement("button");
    deletebtn.type="button";
    //deletebtn.id = rowID;
    var text3= "<img src='../Images/Delete.png'>";
    deletebtn.innerHTML = text3;
    deletebtn.onclick = function() {
        deleteRow(rowID);
    };



    tdAttrName.appendChild(text1);
    tdAttrType.appendChild(text2);
    tdDelete.appendChild(deletebtn);
    tr.appendChild(tdAttrName);
    tr.appendChild(tdAttrType);
    tr.appendChild(tdDelete);
    rowID++;
    table.appendChild(tr);
    showAttrDivision.appendChild(table);
}

function deleteRow(row) 
{
    document.getElementById("attrtable").deleteRow(row);
}

Answer 1

更改删除行，因为您的 table 名称是 "attrtable" 而不是 "table"。

document.getElementById("attrtable").deleteRow(row);

Answer 2

function deleteRow(row)
{
    var i=row.parentNode.parentNode.rowIndex;
    document.getElementById('POITable').deleteRow(i);
}


function insRow()
{
    var x=document.getElementById('POITable');
       // deep clone the targeted row
    var new_row = x.rows[1].cloneNode(true);
       // get the total number of rows
    var len = x.rows.length;
       // set the innerHTML of the first row 
    new_row.cells[0].innerHTML = len;

       // grab the input from the first cell and update its ID and value
    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';

       // grab the input from the first cell and update its ID and value
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';

       // append the new row to the table
    x.appendChild( new_row );
}

Demo_click here

Answer 3

 $(buttonSelector).live ('click', function ()
 {
    $(this).closest ('tr').remove ();
 }
 );

使用 .live 绑定事件将在动态添加行时自动绑定它。

编辑

live 现在已弃用，我认为是从 1.7 版开始。

现在的方法是使用 on 而不是 live。

$('#tableid').on('click', buttonSelector, function(){
    $(this).closest ('tr').remove ();
});

参见doc。

Reference

单击行按钮删除动态创建的 Table 行

Delete a dynamically created Table row upon row button click

javascript

forms

dynamic

elements

delete-row