如何使用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或類名對其進行訪問。

您還可以更改ur html標記，以使每行都有一個復選框，指示要刪除的行...；對於每行（如果選中了復選框），請刪除該行。

如果您明白了，那就投票。