JS: addEventListener для динамически созданных объектов DOM, которые удаляют parentNode

Question

Я пытаюсь сделать это: выполнить простой расчет с несколькими введенными пользователем числами, а затем щелчком добавить вычисление в таблицу в новой строке , Таблица должна содержать три столбца для трех чисел. Все в порядке, но я застрял в этом: как добавить параметр для пользователя, чтобы удалить некоторые строки?

Таким образом, это будет HTML структура:

 <tbody id="tableBody"> 
      <tr id="row8"> <!-- In js this is ("row" + i) --> 
       <td class="dimA"></td> 
       <td class="dimB"></td> 
       <td class="area"></td> 
       <td><input type="checkbox" id="del8"></td> <!-- In js this is ("del" + i) --> 
      </tr> 
     </tbody> 

Таким образом, элемент тра создаются JavaScript, и я в идентификаторах увеличивается после каждого добавления. Мне нужно удалить всю строку, когда пользователь установит флажок. Я знаю способ сделать это с помощью addEventListener, но как это сделать с неизвестным количеством элементов?

Вот Javascript:

function dodajNaListu(eventInfo) { 
    if (dimA & dimB !== 0) { 
     var tr = document.createElement("tr"); 
     tr.id = "row" + i; 

     var td1 = document.createElement("td"); 
     td1.className = "dimA"; 
     var A = document.createTextNode(dimA); 
     td1.appendChild(A); 

     var td2 = document.createElement("td"); 
     td2.className = "dimB"; 
     var B = document.createTextNode(dimB); 
     td2.appendChild(B); 

     var td3 = document.createElement("td"); 
     td3.className = "area"; 
     var P = document.createTextNode(rezultat); 
     td3.appendChild(P); 

     var td4 = document.createElement("td"); 
     var chck1 = document.createElement("input"); 
     chck1.id = "del" + i; 
     chck1.setAttribute("type", "checkbox"); 
     td4.appendChild(chck1); 

     tr.appendChild(td1); 
     tr.appendChild(td2); 
     tr.appendChild(td3); 
     tr.appendChild(td4); 
     document.getElementById("tableBody").appendChild(tr); 
     i++; 
    } 
} 

Спасибо за вашу помощь, я явный новичок в этой области. И нет, я не использую jQuery. Это приложение для Windows 8.1, которое мне нужно для моей работы.

Answer 1

Хорошо, я нашел ответ. Вот jsfiddle ссылка: http://jsfiddle.net/sez1bwL3/

я добавил слушатель события для каждого флажка, созданной в рамках функции dodajNaListu, который вызывает эту функцию:

function delRow() { 
    var current = window.event.srcElement; 
    while ((current = current.parentElement) && current.tagName != "TR"); 
    current.parentElement.removeChild(current); 
} 

Вот ссылка на веб-страницу, где я нашел мой ответ: http://www.joegarrepy.com/tableaddrow_jscript.htm

Отличный день.