javascript - Jquery add rows then remove them if not needed -

i struggling setting jquery insert new table rows , remove them if dont need them.

for example:

i have 2 buttons on each table row, so:

 --------------------------------------  |add / remove | name  | id | color   |  --------------------------------------  |add / remove | shirt | 1  | blue    |  --------------------------------------  |add / remove | shirt | 2  | red     |  -------------------------------------- 

when click "add" button use ajax go out , grab data , insert rows after current row. here code (this works fine):

 $(function() {         $('#example').on('click', 'input[name="cmdaddrow"]', function() {             var currow = $(this).closest('tr');             $.ajax({                 cache: false,                 type: 'post',                 url: '{{ path('inventory_low_test_asin_data') }}',                 data: '',                 success: function(data)                 {                     var newrow = data.htmldata;                     currow.after(newrow);                 }             });         });     });   --------------------------------------  |add / remove | name  | id | color   |  --------------------------------------  |add / remove | shirt | 1  | blue    |  --------------------------------------  | inserted    |     | 1  | blue    | - need able remove row  --------------------------------------  | inserted    | b     | 1  | blue    | - need able remove row  --------------------------------------  | inserted    | c     | 1  | blue    | - need able remove row  --------------------------------------  | inserted    | d     | 1  | blue    | - need able remove row  --------------------------------------  |add / remove | shirt | 2  | red     |  -------------------------------------- 

now tricky part, if dont need rows of data inserted (sometimes return upwards of 20 rows inserted after current row), need able remove of rows inserted @ once (not 1 @ time). how handled when click "remove" button row? not sure write jquery.

thanks help!!!!

removing elements id restricts deleting rows 1 @ time. i'd suggest assigning class every row belonging ajax request. class need unique per every ajax request...for simplicity, can append time-stamp string , use class name.

wherever you're constructing table (whether on server or client side), add unique class:

<tr class="uniquely_named_class">data....</tr> <tr class="uniquely_named_class">data2....</tr> 

now when click button delete unwanted rows, need name of class select rows want delete... in case, delete 2 rows listed above:

$('#example').click(function(){     $('.uniquely_named_class').remove(); });