Delete dynamically created row : removechild

StackOverflow https://stackoverflow.com/questions/17038542

  •  31-05-2022
  •  | 
  •  

Question

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".

Was it helpful?

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.

OTHER TIPS

Try this one 

var parNode=document.getElementById("dependent");
parNode.removeChild(parNode.childNodes[rowCount]);

Just provide the rowCount

Little addition to @Teemu answer, for this case: Delete button on each row, to delete that particular row. -> single button. Since rcount doesn't return desired value... To delete multiple rows, maybe additional checkbox should be added...

So, this works only if you click on delete button in each row.

      function deletefunction() {


     id= $(this).attr('id');

    fin = id.replace(/\D+/, '');





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



    }

Also, script doesn't return right number of rows... it counts deleted rows too...

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top