Löschen Sie eine dynamisch erstellte Tabelle Zeile nach Zeile Schaltfläche klicken

Question

Ich habe versucht, eine dynamisch erstellte Tabellenzeile zu löschen, wenn der Benutzer auf die Schaltfläche Löschen, die Teil dieser Tabellenzeile ist, klickt. Aber das scheint für mich nicht zu funktionieren. Ich habe viele verschiedene Methoden ausprobiert, aber es löscht immer noch entweder aus der zuerst erstellten Zeile oder gar nicht. Dies ist, was ich gerade zur Hand habe und nicht funktioniert.

JS Funktion:

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

ändern Zeile löschen, weil Ihr Tabellenname "attrtable" nicht "Tisch" ist.

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

Answer 3

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

.live mit Ihrem Event zu binden, wird es automatisch binden, wenn Ihre Zeile dynamisch hinzugefügt wird.

bearbeiten

live jetzt veraltet ist, da Version 1.7 glaube ich.

Der Weg zu gehen ist jetzt on anstelle von live.

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

Siehe die doc.

Reference