如何使用Javascript DOM删除动态创建的html行中的特定行？

Question

这里尝试通过单击添加按钮添加html行，并在单击删除按钮时删除添加的行。

按预期添加行可以正常工作。但问题是删除功能删除表的最后一行而不是删除相应的行。

由于每行都有删除按钮，因此单击删除按钮时只应删除相应的行。

以下是jsfiddle，可以更好地展示情况。

如果上面的小提琴无法加载，请参考下面的代码。

提前致谢

JAVSCRIPT

//function to add a row 
function insSpec()
    {


    rl=document.getElementById("insSpecc").rows.length;
    var a=document.getElementById("insSpecc").insertRow(rl);
    var h=a.insertCell(0);
    var f=a.insertCell(1);
    var m=a.insertCell(2);
    var n=a.insertCell(3);
    h.innerHTML='<div class="separator"><input type="text" name="client_prod[]"  class="separator" id="competitor_prod'+rl+'" style="width:150px"  >';
    f.innerHTML='<input type="text" name="client_nrx[]" id="client_nrx'+rl+'" size="5"  />';
    m.innerHTML='<input type="text" name="client_rrx[]"  id="client_rrx'+rl+'" size="5"  />';
    n.innerHTML='<button   class="del_img" onClick="delSpec('+rl+')">Delete</button></div>';

    }
//function to delete a row
function delSpec(rl)
    {   
    r=document.getElementById("insSpecc").rows.length;
    if(r!=2)
    {
        document.getElementById("insSpecc").deleteRow(r-1)
    }


    }

HTML

<table id="insSpecc" width="100%;">
    <div class="separator">
    <tr>
        <td><span>Product</span></td>
        <td><span>NRX(Qty)</span></td>
        <td><span>RRX(Qty)</span></td></tr></div>
    <tr>
        <td><input type="text" id="client_prod" name="client_prod[]" style="width:150px;" class="validate[required] text-input"></td>
        <td>
        <input type="text" id="client_nrx" name="client_nrx[]" size="5" class="validate[required] text-input">

        </td>
            <td>
        <input type="text" id="client_rrx" name="client_rrx[]" size="5">

        </td>
          <td>
        <button id="add_img"   id='insSpecimg' style='display:block;' onClick="insSpec()" align="center">Add</button>
        </td>   
    </tr>
    </table>

Answer 1

document.getElementById("insSpecc").deleteRow(r-1)

应该是

document.getElementById("insSpecc").deleteRow(rl);

Answer 2

尝试使用

 n.innerHTML='<button   class="del_img" onClick="delSpec(this)">Delete</button></div>';

以后

function delSpec(node)
    {    
    r=node.parentNode.parentNode;
    r.parentNode.removeChild(r);
    }

在这种情况下，delSpec将接收指向该按钮的指针，并且能够删除所需的行。

Answer 3

你应该为每一行使用id，你可以用ID删除那行...有几种方法可以在jQuery和其他库中获取DOM元素对象。

您需要做的就是使用getElementById（“行的id”）并将该元素存储在变量中，或者使其成为innerHTML =“”;或删除它像xdazz建议。

您还可以获取具有类名的元素...因此，如果您的行使用任何css类，则可以像使用ID一样获取该行。

Aquatic也是对的：您需要访问所有DOM，遍历它，并获取所需的元素并对其执行任何操作，或使用元素的id或类名访问它。

您还可以更改每行的html标记，以便有一个复选框，告诉您要删除哪些行...如果选中了复选框，则每行都删除该行。

如果你明白了，请投票。