Удаление динамически созданной строки таблицы по строке нажмите кнопку

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

Answer 2

Изменить удалить строку, потому что ваше имя таблицы "attrtable" не "стол".

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

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