Delete dynamically created row : removechild

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

  •  31-05-2022
  •  | 
  •  

题

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

有帮助吗？

解决方案

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.

其他提示

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top