javascript - jQuery Adding and Removing Rows Trouble -

i'm trying create new use implemented tool use here @ work, i'm sure i'm doing wrong.

i can't figure out how make delete row. , more, can figure out how clone within .pt-entry, , have replicated inside of incremental .pt-entry...but without user filled in info.

hopefully makes sense.

you can check out pen here, here's code breakdown rest of yous:

html:

<table class="manage-pt" id="0">     <tr class="pt-entry">         <td class="pt-toggle-group">             <input type="button" class="pt-button togptbutton" value="?" />             <input type="button" class="pt-button addptbutton" value="+" />              <input type="button" class="pt-button delptbutton" value="-" />         </td>         <td class="pt-values">             <div>                 <input type="text" class="vendor" placeholder="vendor name" />             </div>             <div>                 <textarea class="ptcode" name="ptcode" placeholder="pixel tag code" ></textarea>             </div>             <div class="page-select">                 <select>                     <option value="allpages">all pages</option>                     <option value="homepage">homepage</option>                     <option value="vehicledetailspage">vehicledetailspage</option>                     <option value="vehiclesearchresults">vehiclesearchresults</option>                     <option value="contactusform">contactusform</option>                 </select>             </div>             <div class="area-checkboxes">                 <p class="wheretosave">where?</p>                 <input type="checkbox" name="head" /><label for="head">head</label>                  <input type="checkbox" name="body" /><label for="body">body</label>             </div>             <div class="save-pt">                 <input value="save" type="submit" />             </div>         </td>     </tr> </table> 

javascript:

// hides current pt & changes toggle button icon when clicked $('.togptbutton').click(function(){     $('.pt-values').slidetoggle(25, function() {         if ($('.pt-values').is(':hidden')) {             $('input.togptbutton').val('?');         }else{             $('input.togptbutton').val('?');         }     }); });  $(document).ready(function () {     var table = $('.manage-pt'),         rows = $(table).find('tr'),         rowcount = $(rows).length,         addedrow = $(document.createelement('tr')),         addbutton = $('.addptbutton'),         removebutton = $('.delptbutton');      function addrow(){         var thisrow = $(addedrow).clone(true);         $(thisrow).attr('class','.pt-entry-' + rowcount);         rowcount += 1;         $(thisrow).html('<td>row</td>');         $(table).append(thisrow);     }      function removerow(){         var items = $(table).queryselectorall('tr');         if (rowcount > 1) {             $(table).remove(items[rowcount - 1]);             rowcount -= 1;         }else{             alert('cannot delete last row');         }     }      addbutton.click(function(e){         addrow();     });      removebutton.click(function(e){         removerow();     }); }); 

should close mockup ...

alright, think found problem. trying call $(table).queryselectorall('tr'). .queryselectorall javascript function using jquery selector. removerow() function bombs. try commenting line out. then, need find new way select last row, can done this:

$(table).find('tr:last').remove(); 

final form:

function removerow(){     //var items = $(table).queryselectorall('tr');     if (rowcount > 1) {         //$(table).remove(items[rowcount - 1]);         $(table).find('tr:last').remove();         rowcount -= 1;     }     else     {         alert('cannot delete last row');     } } 

if want work in ie8 , older, can use jquery since have number of rows:

$(table).find('tr').eq(rowcount - 1).remove(); 

in place of:

$(table).find('tr:last').remove(); 

jsfiddle: http://jsfiddle.net/em8q5/2/

edit: ------------------------------------------------------------------------------------

alright, found solution being able delete current row.

first, allow parameter removerow function , switch selector use closest:

function removerow(currrow){     //var items = $(table).queryselectorall('tr');     if (rowcount > 1) {         //$(table).remove(items[rowcount - 1]);         currrow.closest('tr').remove();         rowcount -= 1;     }     else     {         alert('cannot delete last row');     } } 

then need modify .click function change dynamically add/remove rows/buttons. also, note parameter knows row's button clicked.

//removebutton.click(function(e){ $('body').on("click", ".delptbutton", function(e) {     removerow($(this)); //note parameter added knows row remove }); 

jsfiddle: http://jsfiddle.net/em8q5/3/