javascript - 单击行按钮删除动态创建的表行

Question

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

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

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