Как удалить определенную строку в динамически создаваемых строках HTML, используя Javascript DOM?

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

Попробуйте использовать

 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 2

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

, что должно быть

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

Answer 3

Вы должны использовать id для каждой строки, и вы можете удалить эту строку с ID ... Есть несколько способов получить объект элемента DOM в jQuery и других библиотеках.

Все, что вам нужно сделать, это использовать getElementById ("идентификатор строки") и сохранить этот элемент в переменной или сделать его innerHTML = ""; или удалите его, как предложил xdazz.

Вы также можете получить элементы с именами классов ... так что, если ваша строка использует какой-либо класс css, вы можете получить эту строку, как вы сделали с ID.

Aquatic также прав: вам нужно либо получить доступ ко всему DOM, пройти по нему и достичь нужного элемента и делать с ним что угодно, либо получить доступ к нему с помощью идентификатора элемента или имени класса.

Вы также можете изменить html-разметку для каждой строки, чтобы иметь флажок, который сообщает, какие строки удалять ... и для каждой строки, если установлен флажок, удалить строку.

Проголосуйте, если вы поняли.