CODEWITHSUNDEEP
javascriptformsdynamicdelete-rowelement
Nayantara Jeyaraj
Nayantara Jeyaraj

Reputation: 2716

Delete a dynamically created Table row upon row button click

I've tried to delete a dynamically created table row when the user clicks on the delete button which is part of that table row. But this doesn't seem to work for me. I've tried many different methods but still it either deletes from the firstly created row or doesn't delete at all. This is what I currently have at hand and doesn't work.

JS Function:

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);
}

Upvotes: 1

Views: 2389

Answers (3)

Tabish Matin
Tabish Matin

Reputation: 85

Change delete line because your table name is "attrtable" not "table".

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

Upvotes: 0

Kalu Singh Rao
Kalu Singh Rao

Reputation: 1697

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

using .live to bind your event will bind it automatically when your row is dynamically added.

Edit

live is now deprecated, since version 1.7 I think.

The way to go now is using on instead of live.

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

See the doc.

Reference

Upvotes: 0

Jaydeep Gondaliya
Jaydeep Gondaliya

Reputation: 331

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

Upvotes: 1

Related Questions