Search code examples
javascriptremovechild

Delete dynamically created row : removechild

HTML : 

<body style='background-color: white;'>

<div>
    <div id='dependent'>
        <input type="button" value="Add" id='abtn' onclick='addfunction()' />
        <input type="button" value="Delete" id='dbtn' onclick='deletefunction(this)' />
        <input type="button" value="Total No. of rows" id='Button2' onclick='total()'/>      <br />

    </div>
    <div>
        <input type="button" value="Submit" id='subid' onclick='smt()' /></div>
</div>

Javascript : 

 <script type="text/javascript">




    function addfunction() {

        rcount++;
        t++;

        tr1 = document.createElement('tr');
        tr1.id = "t" + t;

        tx1 = document.createElement('p');
        text1 = document.createTextNode(t);
        tx1.appendChild(text1);

        td1 = document.createElement('td');
        td1.id = "da" + t;

        c1 = document.createElement('input');
        c1.type = "checkbox";
        c1.id = "a" + t;

        td2 = document.createElement('td');
        td2.id = "db" + t;
        c2 = document.createElement('input');
        c2.type = "checkbox";
        c2.id = "b" + t;

        td3 = document.createElement('td');
        td3.id = "dc" + t;
        c3 = document.createElement('input');
        c3.type = "checkbox";
        c3.id = "c" + t;


        dl1 = document.createElement('input');
        dl1.type = "button";
        dl1.id = "dl" + t;
        dl1.onclick = deletefunction; //Delete button for each row

        br1 = document.createElement('br');

        document.getElementById("dependent").appendChild(tr1);
        document.getElementById(tr1.id).appendChild(tx1);
        document.getElementById(tr1.id).appendChild(td1);
        document.getElementById(td1.id).appendChild(c1);
        document.getElementById(tr1.id).appendChild(td2);
        document.getElementById(td2.id).appendChild(c2);
        document.getElementById(tr1.id).appendChild(td3);
        document.getElementById(td3.id).appendChild(c3);
        document.getElementById(tr1.id).appendChild(dl1);
        document.getElementById(tr1.id).appendChild(br1);



//Delete Function
    function deletefunction() {
        alert('tr' + rcount);
        document.getElementById('tr' + rcount).removeNode(true);

    }




</script>
</body>
</html>

How do i delete dynamically created row(or 'tr') using javascript?

I tried deleting it in two ways,

  1. Separate delete button which will delete the last row.
  2. Delete button on each row, to delete that particular row.

I tried various things but none works, i'm getting errors as " Unable to get value of the property 'removeNode': object is null or undefined".

Solution

  • Try something like this:

    var row = document.getElementById('tr' + rcount);
row.parentElement.removeChild(row);

    It also looks like you're not forming the id of the tr correctly. You have created it like this:

    tr1.id = "t" + t;

    then trying to read:

    document.getElementById('tr' + rcount)

    Also rcount seems not to be what you expect. It's a global variable, having the same value when addfunction() is last executed.