title: Javascript/JQuery to add and delete table row by Id
body: <p>I am trying to add and delete rows (by Id) to my table dynamically. The add button works fine but I am not sure why the delete button doesn't work (it's either deletes the last row or doesn't work). Any suggestion please?</p>
  
  <p>Here is my table:</p>
  
  <pre><code>&lt;table class="customFiltersTable" id="customFiltersTable"&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The Javascript add button has this code inside:</p>
  
  <pre><code>filtersRow = filtersRow + 1;
  
  var fType1 = $('&lt;tr class="rowTableFilters" id="rowFilters'+filtersRow+'" name="rowFilters'+filtersRow+'"&gt;&lt;td class="colFilters" id="colFilters'+column1+'" name="colFilters'+column1+'" width="480px" align="center"&gt;&lt;/td&gt;&lt;td class="colFilters" id="colFilters'+column2+'" name="colFilters'+column2+'" width="480px" align="center"&gt;&lt;/td&gt;&lt;td class="delButton" id="delButton" name="delButton" width="40px" align="center"&gt;&lt;button type="button" class="btn btn-link" id="deleteFilter'+filtersRow+'" name="deleteFilter'+filtersRow+'" style="float: right;"&gt;Del&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;');
  
  $("#customFiltersTable").append(fType1).promise().done(function () {
     $("#deleteFilter" + filtersRow).click(function(){
           var row = document.getElementById("rowFilters"+filtersRow);
           row.parentNode.removeChild(row);
     });
  });
  </code></pre>
  
  <p>Thanks!</p>