jQuery datatables delete rows but only the ones which are dynamically added -

i have followed post(http://sebastiandahlgren.se/2013/07/27/adding-lines-to-table-with-jquery/) , implemented add row , delete row functionality in jsp page.

everything working fine except 1 problem. delete row button deletes row loaded during page load (say 30 rows).

here code snippet

 function deleterow () {     if (count != 1) {         $("table#mytable").datatable().fndeleterow(count - 1);          count--;     }   } 

i want allow rows dynamically added using addrow function of datatables plugin. how can issue solved.

you'll need distinguish between pre-loaded rows , ones added dynamically in js code. possible solution add custom css class dynamically added rows only:

function addrow() {     var table = $('table#mytable').datatable();     table.fnadddata( [           '<input type="text" name="first_name_' + count + '">',           '<input type="text" name="last_name_' + count + '">' ] );     $(table._('tr')[count]).addclass('dynamicrow'); // add dynamic css class      count++;  } 

then in delete row method, check if row css classes contain our dynamic one. if so, delete row, otherwise nothing. here example:

function deleterow () {   if (count != 1) {       var table = $("table#mytable").datatable();       if ($(table._('tr')[count - 1]).hasclass('dynamicrow')) {           table.fndeleterow(count - 1);            count--;       }    } }