Delete a dynamically created Table row upon row button click

Question

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

Jaydeep Gondaliya · Accepted Answer · 2016-06-28 05:32:36Z

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

Community · Accepted Answer · 2017-05-23 12:00:49Z

0

 $(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

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Jun 28, 2016 at 5:34

Kalu Singh Rao

1,6971 gold badge16 silver badges21 bronze badges

Comments

Leftium · Accepted Answer · 2016-06-28 05:42:49Z

0

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

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

edited Jun 28, 2016 at 5:42

Leftium

18k6 gold badges74 silver badges110 bronze badges

answered Jun 28, 2016 at 5:31

Tabish Matin

951 silver badge12 bronze badges

1 Comment

Nayantara Jeyaraj Over a year ago

Yeah sorry 'bout that. That was a typo. But it still doesn't work

Collectives™ on Stack Overflow

Delete a dynamically created Table row upon row button click

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related