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>

如何使用javascript删除动态创建的行（或'tr'）？

我尝试以两种方式删除它，

单独的删除按钮，将删除最后一行。
删除每行上的按钮，以删除该特定行。

我尝试了各种各样的东西但没有效果，我收到的错误为" Unable to get value of the property 'removeNode': object is null or undefined".

Answer 1

尝试这样的事情：

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

您似乎还没有正确构建id的{{1}}。你已经像这样创建了它：

tr

然后尝试阅读：

tr1.id = "t" + t;

同样document.getElementById('tr' + rcount)似乎不是你所期望的。它是一个全局变量，在上次执行rcount时具有相同的值。

Answer 2

试试这个

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

只需提供rowCount

即可

Answer 3

对@Teemu的回答很少，对于这种情况：每行删除按钮，删除该特定行。 - ＆GT;单按钮。由于rcount没有返回所需的值...要删除多行，可能需要添加其他复选框...

因此，仅当您单击每行中的删除按钮时，此功能才有效。

      function deletefunction() {


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

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





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



    }

此外，脚本不会返回正确的行数...它也会计算已删除的行...

删除动态创建的行：removechild

3 个答案: